SpringBoot+Mybatis+Vue整合

创建springboot项目

添加配置

spring.datasource.url &＃61; jdbc:mysql:///demo?serverTimezone&＃61;UTC&characterEncoding&＃61;utf8&useUnicode&＃61;true&useSSL&＃61;false
spring.datasource.username &＃61; root
spring.datasource.password &＃61; 123456
spring.datasource.driver-class-name&＃61;com.mysql.cj.jdbc.Driver
#指定映射xml文件位置
mybatis.mapper-locations&＃61;classpath:mapper/*.xml
#端口
server.port&＃61;8888


mybatis反向生成

db.sql

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS &＃96;user&＃96;;
CREATE TABLE &＃96;user&＃96; (&＃96;id&＃96; int(11) NOT NULL AUTO_INCREMENT,&＃96;name&＃96; varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,&＃96;email&＃96; varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,&＃96;username&＃96; varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,&＃96;password&＃96; varchar(40) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,&＃96;createDate&＃96; timestamp NULL DEFAULT NULL,&＃96;address&＃96; varchar(255) DEFAULT NULL,PRIMARY KEY (&＃96;id&＃96;) USING BTREE
) ENGINE&＃61;InnoDB AUTO_INCREMENT&＃61;13 DEFAULT CHARSET&＃61;utf8 ROW_FORMAT&＃61;DYNAMIC;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO &＃96;user&＃96; VALUES (&＃39;1&＃39;, &＃39;王者归来&＃39;, &＃39;287664409&＃64;qq.com&＃39;, &＃39;admin&＃39;, &＃39;123456&＃39;, &＃39;2020-09-21 00:00:00&＃39;, &＃39;北京市通州区商通大道1号&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;2&＃39;, &＃39;王小虎&＃39;, &＃39;&＃39;, &＃39;tiger&＃39;, &＃39;123456&＃39;, &＃39;2020-09-22 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;3&＃39;, &＃39;王小虎&＃39;, &＃39;&＃39;, &＃39;tiger&＃39;, &＃39;123456&＃39;, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;4&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;5&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;6&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;7&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;8&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;9&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;10&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;11&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);
INSERT INTO &＃96;user&＃96; VALUES (&＃39;12&＃39;, &＃39;王小虎&＃39;, null, &＃39;tiger&＃39;, null, &＃39;2020-09-23 00:00:00&＃39;, &＃39;上海市普陀区金沙江路 1518&＃39;);


generatorConfig.xml


jdbc.properties

jdbc.driverLocation&＃61;D:\\Software\\mysql-connector-java-8.0.11.jar
jdbc.driverClass&＃61;com.mysql.cj.jdbc.Driver
#数据库地址
jdbc.jdbcUrl&＃61;jdbc:mysql:///demo?serverTimezone&＃61;UTC&characterEncoding&＃61;utf8&useUnicode&＃61;true&useSSL&＃61;false
#用户名
jdbc.user&＃61;root
#密码
jdbc.password&＃61;123456
#最大连接数
c3p0.maxPoolSize&＃61;30
#最小连接数
c3p0.minPoolSize&＃61;10
#关闭连接后不自动commit
c3p0.autoCommitOnClose&＃61;false
#获取连接超时时间
c3p0.checkoutTimeout&＃61;10000
#当获取连接失败重试次数
c3p0.acquireRetryAttempts&＃61;2


运行

LoginController

/*********************************************** Copyright (C) 2019 IBM All rights reserved.********** K*I*N*G ********** B*A*C*K *******/
package com.example.demo.controller;
/*** &＃64;author Moses ** &＃64;Date 2020/9/22 12:00*/import com.example.demo.entity.User;
import com.example.demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;&＃64;CrossOrigin
&＃64;Controller
public class LoginController {&＃64;Autowiredprivate IUserService userService;&＃64;ResponseBody&＃64;PostMapping("/login")public boolean login(User user) {return userService.findUser(user) &＃61;&＃61; null;}
}

UserController

/*********************************************** Copyright (C) 2019 IBM All rights reserved.********** K*I*N*G ********** B*A*C*K *******/
package com.example.demo.controller;
/*** &＃64;author Moses ** &＃64;Date 2020/9/22 12:00*/import com.example.demo.entity.User;
import com.example.demo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;&＃64;Controller
&＃64;RequestMapping(value &＃61; "/user")
public class UserController {&＃64;Autowiredprivate IUserService userService;&＃64;ResponseBody&＃64;GetMapping("/findById/{id}")public User findById(&＃64;PathVariable(name &＃61; "id") Integer id) {return userService.findById(id);}&＃64;ResponseBody&＃64;GetMapping("/findUserList")public List findUserList() {List list &＃61; userService.findUserList();return list;}
}

IUserService

package com.example.demo.service;import com.example.demo.entity.User;import java.util.List;public interface IUserService {User findById(Integer id);List findUserList();User findUser(User user);
}


UserServiceImpl

package com.example.demo.service.impl;import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import com.example.demo.service.IUserService;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.List;&＃64;Service("userService")
public class UserServiceImpl implements IUserService {&＃64;Resourceprivate UserMapper userMapper;&＃64;Overridepublic User findById(Integer id) {return userMapper.selectByPrimaryKey(id);}&＃64;Overridepublic List findUserList() {return userMapper.findUserList();}&＃64;Overridepublic User findUser(User user) {return userMapper.findUser(user);}
}


DemoApplication


package com.example.demo;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;&＃64;SpringBootApplication
&＃64;MapperScan("com.example.demo.mapper")
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}
}


UserMapper.xml添加

selectfrom userwhere username &＃61; #{username,jdbcType&＃61;VARCHAR}and password &＃61; #{password,jdbcType&＃61;VARCHAR}

selectfrom user

启动

localhost:8888/user/findById/1

创建vue项目

安装node

安装vue

npm install --global vue-cli

npm install -g webpack

vue init webpack vue

安装淘宝npm

npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org

安装element-ui

cnpm install element-ui --save

main.js&＃xff0c;引入element-ui依赖

import Element from &＃39;element-ui&＃39;
import &＃39;element-ui/lib/theme-chalk/index.css&＃39;
Vue.use(Element)

安装axios

cnpm install axios --save

main.js中全局引入axios

import axios from &＃39;axios&＃39;
Vue.prototype.$axios &＃61; axios //

配置自动格式化和代码纠正

{"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.format.enable": true,"[vue]": {"editor.defaultFormatter": "dbaeumer.vscode-eslint"}}

config跨域配置

index.js添加

proxyTable: {&＃39;/api&＃39;: {target: &＃39;http://127.0.0.1:8888&＃39;,changeOrigin: true,pathRewrite: {&＃39;^/api&＃39;: &＃39;&＃39;}}},

dev.env.js添加

BASE_API: &＃39;"/api/"&＃39;,

Login.vue

UserIndex.vue

UserDetail.vue

router配置

index.js

import Vue from &＃39;vue&＃39;
import Router from &＃39;vue-router&＃39;
import HelloWorld from &＃39;&＃64;/components/HelloWorld&＃39;
import Login from &＃39;&＃64;/view/Login&＃39;
import UserIndex from &＃39;&＃64;/view/UserIndex&＃39;
import UserDetail from &＃39;&＃64;/view/UserDetail&＃39;
Vue.use(Router)export default new Router({routes: [{path: &＃39;/&＃39;,name: &＃39;HelloWorld&＃39;,component: HelloWorld},{path: &＃39;/login&＃39;,name: &＃39;Login&＃39;,component: Login},{path: &＃39;/user&＃39;,name: &＃39;UserIndex&＃39;,component: UserIndex},{path: &＃39;/userDetail&＃39;,name: &＃39;UserDetail&＃39;,component: UserDetail}]
})


启动

http://localhost:8080/#/login

登录跳转

点击查看