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

一、springBoot

创建springBoot项目

分为三个包，分别为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

数据库需要建相应得到表

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`

启动项目

# 进入项目目录

cd vue-01

# 编译

npm install

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

# 启动

npm run dev

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

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

  }

}