Vue + Spring Boot 项目实战（二）笔记

Vue + Spring Boot 项目实战（二）笔记

前端页面开发

设置反向代理

原教程代码：

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

新版代码：

import Vue from "vue";
import router from './router'
import App from "./App";
import axios from "axios"

axios.defaults.baseURL='http://localhost:8443/api'
Vue.prototype.$axios=axios
Vue.config.productionTip=false

new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

首先是要通过npm安装axios，然后就可以直接import

Vue.prototype.$axios=axios

Vue.prototype.$axios=axios这么写的原因是为了让所有组件都可以使用axios，但又不会污染全局作用域，以$开头则只是规范，为了与组件中定义的数据、方法、计算属性区分开。

例如：

Vue.prototype.appName = 'My App'

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例 property 名！😯
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 "My App"，然后出现 "The name of some other app"，因为 this.appName 在实例被创建之后被 data 覆写了。使用$则可以避免这种情况。

运行页面空白， [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

问题就出在这个地方，打开F12可以看到

翻译过来大致意思就是你正在使用的是运行时版的vue，但是教程中这种语法需要带编译器的vue，显然运行时版的是不带的。这一点文档中也有所解释：对不同构建版本的解释

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

解决办法有两种：

1. 像文档中写的一样，使用render函数来渲染：render:h=>h(App)
2. vue.config.js中添加runtimeCompiler: true,

为了方便后续教程的使用，采用第二种方法。

后端开发

原项目中使用的是jpa，由于mybatis好歹是学过一点，所以这里给换成mybatis。

配置环境依赖

首先是去掉原本教程中的jpa依赖，换上mybatis-spring-boot-starter:

<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.0</version>
 </dependency>

修改配置文件

server.port=8443
mybatis.type-aliases-package=com.sk.wjbackend.pojo

spring.datasource.url=jdbc:mysql://localhost:3306/white_jotter?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=true
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

pojo包里面装的就是实体类。

User类

pojo包中的User实体类，非常普通，没有其他东西

package com.sk.wjbackend.pojo;


public class User {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

UserMapper

在dao包中创建UserMapper类，用于操作数据库。

@Repository
public interface UserMapper {
    @Select("select * from user where username=#{username}")
    public abstract User findByUsername(String username);

    @Select("select * from user where username=#{username} and password=#{password}")
    public abstract User getByUsernameAndPassword(String username,String password);
}

UserService类

service类正常调用UserMapper中的方法

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public boolean isExist(String username){
        User user=getByName(username);
        return null!=user;
    }

    public User getByName(String username){
        return userMapper.findByUsername(username);
    }
    public User get(String username, String password){
        return userMapper.getByUsernameAndPassword(username, password);
    }

}

LoginController类

最后LoginController类调用service层的方法。

@Controller
public class LoginController {
    @Autowired
    UserService userService;

    @CrossOrigin
    @PostMapping(value = "/api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser){
        String username=requestUser.getUsername();
        String password=requestUser.getPassword();
        username= HtmlUtils.htmlEscape(username);
        User user = userService.get(username, password);
        if (user==null){
            return new Result(400);
        }else {
            return new Result(200);
        }
    }
}