微服务系列文章之 Springboot+Vue实现登录注册

这篇具有很好参考价值的文章主要介绍了微服务系列文章之 Springboot+Vue实现登录注册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、springBoot

创建springBoot项目

微服务系列文章之 Springboot+Vue实现登录注册,微服务,spring boot,vue.js

 

分为三个包,分别为controller,service, dao以及resource目录下的xml文件。

添加pom.xml 依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.9</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.devops</groupId>
    <artifactId>spring-boot-vue</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>spring-boot-vue</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- mybatis 支持 SpringBoot -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>

        <!-- mysql 驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>

        <!-- SpringBoot web组件 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

UserController.java

package com.devops.springboot.vue.controller;

/**
 * @Author 虎哥
 * @Description //TODO
 * |要带着问题去学习,多猜想多验证|
 **/

import com.devops.springboot.vue.pojo.User;
import com.devops.springboot.vue.service.UserService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

@RestController
public class UserController {

    @Resource

    UserService userService;

    @PostMapping("/register/")

    @CrossOrigin("*")
    String register(@RequestBody User user) {

        System.out.println("有人请求注册!");

        int res = userService.register(user.getAccount(), user.getPassword());

        if (res == 1) {

            return "注册成功";

        } else {

            return "注册失败";

        }

    }

    @PostMapping("/login/")
    @CrossOrigin("*")
    String login(@RequestBody User user) {
        int res = userService.login(user.getAccount(), user.getPassword());
        if (res == 1) {
            return "登录成功";
        } else {
            return "登录失败";
        }

    }

}

 

UserService.java

package com.devops.springboot.vue.service;

/**
 * @Author 虎哥
 * @Description //TODO
 * |要带着问题去学习,多猜想多验证|
 **/
import com.devops.springboot.vue.dao.UserMapper;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;

@Service
public class UserService {

    @Resource
    UserMapper userMapper;
    public int register(String account, String password) {
        return userMapper.register(account, password);
    }

    public int login(String account, String password) {
        return userMapper.login(account, password);
    }

}

 

User.java (我安装了lombok插件)

package com.devops.springboot.vue.pojo;

/**
 * @Author 虎哥
 * @Description //TODO
 * |要带着问题去学习,多猜想多验证|
 **/
import lombok.Data;

@Data
public class User {

    private String account;
    private String password;

}

 

UserMapper.java

package com.devops.springboot.vue.dao;

/**
 * @Author 虎哥
 * @Description //TODO
 * |要带着问题去学习,多猜想多验证|
 **/
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper {
    int register(String account, String password);
    int login(String account, String password);
}

 

UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.devops.springboot.vue.dao.UserMapper">
    <insert id="register">
       insert into user (account, password) values (#{account}, #{password});
    </insert>
    <select id="login" resultType="Integer">
        select count(*) from user where account=#{account} and password=#{password};
    </select>
</mapper>

 

主干配置

application.yaml

server.port: 8000

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://192.168.59.135:3307/community?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false
    driver-class-name: com.mysql.jdbc.Driver

mybatis:
  type-aliases-package: com.devops.springboot.vue.pojo
  mapper-locations: classpath:mybatis/mapper/*.xml
  configuration:
    map-underscore-to-camel-case: true

 

数据库需要建相应得到表

1

2

3

4

CREATE TABLE `user` (

  `account` varchar(255) COLLATE utf8_bin DEFAULT NULL,

  `password` varchar(255) COLLATE utf8_bin DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

二、创建VUE项目

安装node,npm,配置环境变量。
配置cnpm仓库,下载的时候可以快一些。

1

npm i -g cnpm --registry=https://registry.npm.taobao.org

安装VUE

1

npm i -g vue-cli

初始化包结构

1

vue init webpack project

启动项目

1

2

3

4

5

6

# 进入项目目录

cd vue-01

# 编译

npm install

npm install --save axios element-ui element-ui/lib/theme-chalk/index.css vue-axios

# 启动

npm run dev

修改项目文件,按照如下结构

微服务系列文章之 Springboot+Vue实现登录注册,微服务,spring boot,vue.js

APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {

    name: 'App'

  }
</script>

<style>

</style>

welcome.vue

<template>

  <div>

    <el-input v-model="account" placeholder="请输入帐号"></el-input>

    <el-input v-model="password" placeholder="请输入密码" show-password></el-input>

    <el-button type="primary" @click="login">登录</el-button>

    <el-button type="primary" @click="register">注册</el-button>

  </div>

</template>

<script>

  export default {

    name: 'welcome',

    data () {

      return {

        account: '',

        password: ''

      }

    },

    methods: {

      register: function () {

        this.axios.post('/api/register/', {

          account: this.account,

          password: this.password

        }).then(function (response) {

          console.log(response);

        }).catch(function (error) {

          console.log(error);

        });

        // this.$router.push({path:'/registry'});

      },

      login: function () {

        this.axios.post('/api/login/', {

          account: this.account,

          password: this.password

        }).then(function () {

          alert('登录成功');

        }).catch(function (e) {

          alert(e)

        })

        // this.$router.push({path: '/board'});

      }

    }

  }

</script>

<style scoped>

</style>

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: {App},

  template: '<App/>'

})

router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import welcome from '@/components/welcome'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'welcome',

      component: welcome

    }

  ]

})

config/index.js

'use strict'

// Template version: 1.3.1

// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {

  dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

      '/api': {

        target: 'http://localhost:8000', // 后端接口的域名

        // secure: false,  // 如果是https接口,需要配置这个参数

        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置

        pathRewrite: {

          '^/api': '' //路径重写,当你的url带有api字段时如/api/v1/tenant,

          //可以将路径重写为与规则一样的名称,即你在开发时省去了再添加api的操作

        }

      }

    },

    // Various Dev Server settings

    host: 'localhost', // can be overwritten by process.env.HOST

    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

    autoOpenBrowser: false,

    errorOverlay: true,

    notifyOnErrors: true,

    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?

    // If true, your code will be linted during bundling and

    // linting errors and warnings will be shown in the console.

    useEslint: true,

    // If true, eslint errors and warnings will also be shown in the error overlay

    // in the browser.

    showEslintErrorsInOverlay: false,

    /**

     * Source Maps

     */

    // https://webpack.js.org/configuration/devtool/#development

    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,

    // set this to false - it *may* help

    // https://vue-loader.vuejs.org/en/options.html#cachebusting

    cacheBusting: true,

    cssSourceMap: true

  },

  build: {

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    /**

     * Source Maps

     */

    productionSourceMap: true,

    // https://webpack.js.org/configuration/devtool/#production

    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

  }

}

微服务系列文章之 Springboot+Vue实现登录注册,微服务,spring boot,vue.js

微服务系列文章之 Springboot+Vue实现登录注册,微服务,spring boot,vue.js

微服务系列文章之 Springboot+Vue实现登录注册,微服务,spring boot,vue.js

输入账号密码,实现简单的注册,登录功能。文章来源地址https://www.toymoban.com/news/detail-649408.html

到了这里,关于微服务系列文章之 Springboot+Vue实现登录注册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微服务系列文章 之SpringBoot之定时任务详解

    使用SpringBoot创建定时任务非常简单,目前主要有以下三种创建方式: 一、基于注解(@Scheduled) 二、基于接口(SchedulingConfigurer) 前者相信大家都很熟悉,但是实际使用中我们往往想从数据库中读取指定时间来动态执行定时任务,这时候基于接口的定时任务就派上用场了。 三、

    2024年02月16日
    浏览(35)
  • spring boot3登录开发-3(2短信验证登录/注册逻辑实现)

      ⛰️个人主页:     蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途 目录 写在前面 上文衔接 内容简介 功能分析 短信验证登录实现 1.创建交互对象 用户短信登录/注册DTO 创建用户登录VO 2.创建自定义业务异常 创建验证码错误异常 创建用户被封禁异

    2024年04月09日
    浏览(42)
  • 微服务系列-基于Spring Cloud Eureka进行服务的注册与消费

    公众号「架构成长指南」,专注于生产实践、云原生、分布式系统、大数据技术分享。 使用 RestTemplate 的 Spring Boot 微服务通信示例 使用 WebClient 的 Spring Boot 微服务通信示例 使用 Spring Cloud Open Feign 的 Spring Boot 微服务通信示例 在本教程中,我们将学习如何在Spring boot微服务项

    2024年02月05日
    浏览(127)
  • Spring Cloud 微服务系列文章合集,一次性看个够!

    微服务架构图 为了方便大家可以直接下载编辑,这里用的ProcessOn画的架构图,可以直接克隆一个出来进行编辑,地址:https://www.processon.com/view/6523a1b37fde9c4bb35c7278 微服务系列文章合集,点击阅读 Spring Cloud 微服务系列前言 Spring Cloud 微服务系列包版本号约定 IntelliJ IDEA 创建多模

    2024年02月08日
    浏览(48)
  • Vue项目二 登录注册功能的实现

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 环境搭建完,根据管理系统用户需要注册,实现登录然后将用户信息保存在本地中的需求,本章主要实现系统登录注册功能。 首先分析注册页面所要实现的功能,其功能包括账号、昵称、密码和二次确

    2023年04月08日
    浏览(44)
  • springboot实现最基础的登录注册功能(步骤详细,逻辑清晰)

    学了springboot2知识,就要用起来,不敲代码的程序员不是好程序员。笔者参考了他人的文章实现的这个功能,在自己的搭建过程中也遇到了许多问题,并花了一定的时间解决,下面开始吧! 首先,实现登录注册,我们是不是要先定义一个表?表里面要有什么,看看自己的需求

    2023年04月08日
    浏览(29)
  • Spring Cloud(Finchley版本)系列教程(一) 服务注册与发现(eureka)

    Spring Cloud(Finchley版本)系列教程(一) 服务注册与发现(eureka) 为了更好的浏览体验,欢迎光顾勤奋的凯尔森同学个人博客http://www.huerpu.cc:7000 如有错误恳请大家批评指正,与大家共同学习、一起成长,万分感谢。 一、构建环境 Spring Cloud 的构建工具可以使用 Maven 或 Gradle ,但 Ma

    2024年02月09日
    浏览(59)
  • Vue+NodeJS+MongoDB实现邮箱验证注册、登录

    邮件发送 用户注册 用户信息存储到数据库 用户登录 密码加密 JWT生成token Cookie实现快速登录 在用户注册时,先发送邮件得到验证码.后端将验证进行缓存比对,如果验证码到期,比对不正确,拒绝登录;如果比对正确,将用户的信息进行加密存储到数据库. 用户登录时,先通过用户名去

    2024年02月09日
    浏览(45)
  • 手把手教你制作登录、注册界面 SpringBoot+Vue.js(cookie的灵活运用,验证码功能)

    实现思路:用户在界面输入用户名和密码传入变量。用post方法传输到后端,后端接收整个实体对象。将用户名提取出。在dao层方法中通过select注解查询,返回数据库对应的数据对象。如果返回为空则return false。不为空则通过比对数据库返回的密码和用户输入的密码,如果二者

    2024年02月03日
    浏览(51)
  • 特别详细的Spring Cloud 系列教程1:服务注册中心Eureka的启动

    Eureka已经被Spring Cloud继承在其子项目spring-cloud-netflix中,搭建Eureka Server的方式还是非常简单的。只需要通过一个独立的maven工程即可搭建Eureka Server。  我们引入spring cloud的依赖和eureka的依赖。 注意spring cloud和springboot的版本要对应,不然容易出现各种奇怪的错误。 不知道spr

    2024年04月08日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包