怎么搭建vue+springboot项目

开发使用的软件idea：编写后端springboot代码
hbuilderx或vscode编写vue代码
navicat或者dbeaver 编写创建数据库表
vue项目搭建环境配置在搭建之前，首先你需要安装nodejs，具体如何安装就不多赘述，百度即可。
cmd命令win+r键唤出弹框输入cmd，进入控制台界面。
然后，
命令行
cd/d 路径地址
切换到想创建项目的路径
再使用
vue init webpack 项目名称
命令创建项目
project name：项目名称project description：项目描述author：作者runtime + complier：运行时和编译器：默认第一个install router ：是否安装路由，选择安装就后面我安装步骤就不用执行use eslint to lint your code? (y/n)：问你是否使用eslint限制语法，新手建议否set up unit tests (y/n):单元测试，新手选否setup e2e tests with nightwatch? (y/n)：使用nightwatch设置端到端测试?，选否should we run `npm install` for you after the project has been created?：用什么方式运行项目：选npm
然后就创建好了，找到创建项目的路径，cmd命令行，看package.json是dev还是serve
此时的package.json文件内容
{ "name": "项目名称", "version": "0.1.0", // b=版本 "private": true, // 运行脚本：serve为启动项目脚本，build为打包项目脚本 "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build" }, // 安装的vue依赖文件 "dependencies": { "vue": "^2.6.11", // vue-router一般作传参和页面跳转使用 "vue-router": "^3.5.1" }, "devdependencies": { "@vue/cli-service": "~4.5.12", "vue-template-compiler": "^2.6.11" }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ]}
运行npm run dev或npm run serve

vue ui 创建项目这里给大家推荐第二种方式创建
使用cmd命令行
vue ui
会打开一个ui界面，跟着ui提示操作就行
打开cmd提示的网页地址：我的是http://localhost:800
然后一步步操作：
ps：如果提示不是内部命令信息提示，就需要安装vue组件
命令行输入： npm install vue
更具体的百度搜索操作即可
vue项目制作方向梳理在正式开始运行之前先梳理一下创建vue项目需要什么
在按照我刚刚的方式创建完vue项目后，（如有勾选安装router的情况）
便已经可以通过npm run serve直接运行项目了，（只是有前端部分）；
初始它会有一个helloworld.vue的组件界面。一运行便能够看到该页面的内容。
但是单单有这些是不够的。
要制作一个功能齐全的vue项目，最少需要安装这几项：
vue-router :页面跳转和传参
一个ui框架组件：根据你需要制作电脑端还是手机端项目去搜索vue ui框架。
一般都能够搜索到比较常用的vue ui框架。这些ui框架都会有文档，文档内部有如何安装
的npm install 命令。
本次的ui框架为elementui
axios: 目前常用的与后端数据交互的组件，因为我们是vue+springboot项目，为前后端
分离的项目，需要用它来连接前后端
那么，通过梳理我们便清楚了如何往下去制作。
此外，为了快速的构建好vue项目，你最起码你需要掌握以下关于vue的
知识：
vue常用指令：内容渲染指令 ————》{{ 属性值 }} 别名：插值表达式属性值为自定义的属性该指令将数据渲染到页面例子：name: "张三" // 自定义属性<div>{{ name }}</div>------------------------------------------------------属性渲染指令v-bind:元素="属性值" 简写方式==> :元素="属性"------------------------------------------------------事件渲染指令v-on:事件名只需要知道v-on:click="方法名" 点击事件简写:@click="方法名"------------------------------------------------------双向绑定指令v-model="属性值"例如：给input绑定一个v-model的属性值，修改input的值，该绑定的属性值内容会跟着改变------------------------------------------------------条件渲染指令v-ifv-else-ifv-else该指令分条件渲染页面，只有满足条件的标签才会被渲染到页面完整写法例子：name: "张三" // 自定义属性// 页面写法<div v-if="name=='张三'">我的名字是张三</div> // 当满足条件时该文本会显示在页面<div v-else>我的名字不是张三</div> // 不满足条件显示本文本内容------------------------------------------------------列表渲染指令v-for=(item ,index) in list该指令为渲染集合数组的指令，通过该指令可以把多条数据分批次渲染到界面item为数组集合元素的内容，index为下标例：list: [ { name: "xxx", age: xx, }, { name: "zzz", age: zz, },]当下标为0时，item值为list下的{ name: "xxx", age:xx,}需要获取name属性值，则在页面中写成{{ item.name }}完整写法例子：<div v-for(item,index) in list><span>{{ item.name }}</span></div>
除了掌握基础指令外，还需要最起码掌握以下函数：data() { return { // 在return这里定义自定义的属性 }},// 在methods定义方法methods: { 方法a() { }},// 在created内调用方法，实现一加载页面就获取数据，用于增删改查中的查，来查询数据created() {}
还需要了解：在main.js这个入口文件引用npm install 后的组件// 导入安装的组件import 自定义组件名 from "组件路径（一般在搜索安装的组件文档会有说明）"vue.use(自定义组件名) // 引用组件(一般安装的组件文档会有说明)例:import router from "./vue-router"vue.use(router)
掌握了以上知识的前提，是你已经有学习过html5相关的知识后，然后就可以着手制作vue项目了
通过软件vscode打开项目vscode，找到项目路径（我用的是idea，无所谓用什么软件，直接用cmd也能运行）
然后新建终端，输入运行的命令：
运行npm run dev或npm run serve

vue 配置以下vue代码皆以vue2.x为准！
vue-routervue-router是vue.js的官方路由管理器，一般用它作页面跳转和跳转时传参。
如何配置以我的学生管理系统的结构为例：
首先需要在vue项目的界面引入vue-router，
使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：
npm install vue-router
axiosaxios的作用用于于后端异步通信，简单的说就是你想把前端数据传给后端就需要它进行数据交互
同样，使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：
npm install axios
ui框架ui框架，顾名思义就是用于编写界面用的，像淘宝网站，京东等等。
其实选择哪个都ok，看自己喜好，一般比较用的多的是elementui，layui，museui，和mintui等等。
有基于移动端的也有基于电脑端。
以我的学生成绩管理系统为例，用的是elementui
同样，使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：
npm i element-ui -s
到这里基础的vue项目所需要的都安装好了，打开package.json能看到刚刚安装的
引入安装完了，你还需要引入
在mian.js里进行引入刚刚安装的，以及使用elementui
// 导入包import vue from 'vue'import app from './app.vue'import router from './router'import elementui from 'element-ui'import axios from 'axios'vue.config.productiontip = false// elementuivue.use(elementui)vue.prototype.$axios = axiosnew vue({ el: '#app', // 路由 router, render: h => h(app),}).$mount('#app')
结构首先看看我的学生成绩管理系统的完整结构
api: 用于与后端数据交互
assets：用于存放静态资源，如图片，样式设置
components：组件，一般我用它作为项目的主入口，即项目一启动就打开它的界面
router: 配置路由，管理页面跳转
utils：主要工具配置，这里主要是写axios的配置，用于引入api里的get.js和post.js，作为数据交互
views: 你的项目里需要几个页面就使用几个页面进行增添视图组件
router配置在以上截图中，我有：
login.vue
addscore.vue
deletescore.vue
updatescore.vue
showscore.vue
maintry.vue
这几个视图组件
则，router的index.js代码如下
import vue from 'vue'import router from 'vue-router'import login from '@/components/login'import maintry from '@/views/maintry'import addscore from '@/views/addscore'import deletescore from '@/views/deletescore'import showscore from '@/views/showscore'import updatescore from '@/views/updatescore'// 挂载vue-router// 将组件添加到routervue.use(router)export default new router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: login }, { path: '/maintry', name: 'maintry', component: maintry }, { path: '/addscore', name: 'addscore', component: addscore }, { path: '/deletescore', name: 'deletescore', component: deletescore }, { path: '/showscore', name: 'showscore', component: showscore }, { path: '/updatescore', name: 'updatescore', component: updatescore } ]})
ps: 需要注意的是，配置好了路由，你还需要在app.vue里进行声明，需要在app.vue加入<router-view/>代码
app.vue代码：
<template> <div id="app"> <router-view/> </div></template><script>export default { name: 'app'}</script><style>#app { font-family: 'avenir', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; height: 100%;}</style>
request.js这个文件是axios的配置文件
代码如下：
import axios from 'axios'// 创建axios实例// eslint-disable-next-line no-unused-varsconst service = axios.create({ // baseurl: '/', // api的base_url // 后端的请求路径 baseurl: 'http://localhost:8081/student', // api的base_url timeout: 50000 // 请求超时时间})// 请求拦截器axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config }, function (error) { // 对请求错误做些什么 return promise.reject(error) })// 响应拦截器axios.interceptors.response.use( function (config) { // 对响应数据做点什么 return config }, function (error) { // 对响应错误做点什么 return promise.reject(error) })export default service
get和post请求写完request.js后，就需要根据自己的需求在get.js和post.js编写对应的和后端交互的代码
以其中一个进行举例：
get.js：
// 导入axios配置import service from '../utils/request'// 登录export function logintosystem(username, password) { return service.get('/login/logintosystem', { headers: { 'content-type': 'application/json' }, params: { username: username, password: password } })}
如我想实现登录功能，则需要先引入刚刚的request.js文件，把前端输入框输入的两个参数，账号username和密码password传到后端，去获取后端路径下的/login/logintosystem里编写的controller方法
post.js
// 导入axios配置import service from '../utils/request'// 注册账号export function registeraccount (obj) { return service.post('/register/registeraccount', json.stringify(obj), { headers: { 'content-type': 'application/json' } })}
post一般处理参数比较多的情况
如我实现注册功能，用一个对象参数去接收，把它传入后端的/register/registeraccount的controller方法
// 这里给大家举一个例子：// 登录和注册界面以及功能<template> <div v-show="loginshowcontroll"> <div v-show="loginshow" id="login_login"> <el-container> <el-header>学生成绩管理系统登录入口</el-header> <el-main> <span id="login_usernameinfo">用户名:</span> <el-input v-model="username" placeholder="请输入用户名" id="login_input_username"></el-input> <span id="login_passwordinfo">密码:</span> <el-input v-model="password" placeholder="请输入密码" id="login_input_password"></el-input> <button type="submit" id="login_submit" @click="loginbutton">登录</button> <button type="submit" id="login_registerbutton" @click="registerbutton">注册</button> </el-main> <el-footer>登录界面</el-footer> </el-container> </div> <div v-show="registershow" id="login_register"> <el-container> <el-header>学生成绩管理系统注册入口<span id="register_return" @click="registerreturn" @mouseover="mouseover" @mouseleave="mouseleave" :>返回</span></el-header> <el-main>  <span id="register_nameinfo">姓名:</span> <el-input v-model="name" placeholder="请输入姓名" id="register_input_name"></el-input> <span id="register_usernameinfo">用户名:</span> <el-input v-model="registerusername" placeholder="请输入用户名" id="register_input_username"></el-input> <span id="register_passwordinfo">密码:</span> <el-input v-model="registerpassword" placeholder="请输入用户名" id="register_input_password"></el-input>  <button type="submit" id="register_submit" @click="submitbutton">提交</button> <button type="submit" id="register_registerbutton" @click="resetbutton">重置</button> </el-main> <el-footer>注册界面</el-footer> </el-container> </div> </div></template><script> import { logintosystem } from "../api/get"; import { registeraccount } from "../api/post"export default { name: 'login', data () { return { loginshowcontroll: true, // 登录、注册界面显示控制 loginshow: true, // 登录界面显示控制 registershow: false, // 注册界面显示控制 username: '', // 用户名 password: '', // 密码 name: '', // 姓名 bgc: '', // 鼠标悬停变色 registerusername: '', // 注册账号 registerpassword: '' // 注册密码 } }, methods: { // 跳转注册界面 registerbutton () { this.loginshow = false this.registershow = true }, // 登录学生成绩管理系统 loginbutton () { if (this.username.trim() == '') { alert('请输入用户名') return } if (this.password.trim() == '') { alert('请输入密码') return } logintosystem(this.username, this.password).then(res => { if (res.data.data == null) { alert('账号或密码错误！') } else { alert('登录成功') this.$router.push({ path: '/maintry', // 将username传到maintry组件，用于获取登陆人员的姓名 query: {username: this.username} }) } }) }, // 注册按钮 submitbutton () { if (this.name = '') { alert('请输入姓名') return } if (this.username = '') { alert('请输入用户名') return } if (this.password = '') { alert('请输入密码') return } const obj = { username: this.registerusername, password: this.registerpassword, name: this.name } this.registeraccount(obj) this.name = '' this.registerusername = '' this.registerpassword = '' }, // 注册信息 async registeraccount(obj) { await registeraccount(obj).then(res => { alert(res.data.data) }) }, // 重置文本 resetbutton () { this.name = '' this.registerusername = '' this.registerpassword = '' }, // 返回登录界面 registerreturn () { this.loginshow = true this.registershow = false }, // 鼠标悬停变色 mouseover () { this.bgc = 'background-color: #cccccc;color: red' }, mouseleave () { this.bgc = '' } }, watch: { // 监听登录和注册地方只能使用数字和英文 username(newvalue, oldvalue) { this.username = newvalue.replace(/[^a-za-z0-9]/g, '') }, password(newvalue, oldvalue) { this.password = newvalue.replace(/[^a-za-z0-9]/g, '') }, registerusername (newvalue, oldvalue) { this.registerusername = newvalue.replace(/[^a-za-z0-9]/g, '') }, registerpassword(newvalue, oldvalue) { this.registerpassword = newvalue.replace(/[^a-za-z0-9]/g, '') }, // 只能输入汉字 name(newvalue,oldvalue) { this.name = newvalue.replace(/[^\4e00-\u9fa5]/g, '') } }}</script><style scoped>@import "../assets/css/login.css";</style>
增删改查的思路按照该方法去制作即可
vue.config.js这个是vue的配置文件，是代理的一种，可以理解解决跨域
module.exports = { publicpath: '/', lintonsave: false, devserver: { disablehostcheck: true, open: true, port: 8080, proxy: { '/': { // 连接到后端的路径 target: 'http://localhost:8081/student', changeorigin: true, secure: false, pathrewrite: { '^/': '/' } } } }}
这里有一个要注意的是，前面的module.exports一定要注意有没有“s”如果没有s，配置是不会生效的
vue完成以上vue的配置基本就完成了，接下来就可以去编写你需要的页面和功能了
springboot和前端不同，springboot一般使用的是依赖进行配置所需要的内容，以及使用注解去声明
创建springboot项目我使用的idea去创建springboot项目。
直接创建maven项目在后面新增文件夹作为不同的功能
直接下一步，填写完项目名称创建即可
依赖本依赖为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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelversion>4.0.0</modelversion> <groupid>com.hxc</groupid> <artifactid>com.studentscoremanage</artifactid> <version>1.0-snapshot</version> <parent> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-parent</artifactid> <version>2.4.5</version> </parent> <dependencies> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-web</artifactid> </dependency> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter</artifactid> </dependency> <dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-test</artifactid> <scope>test</scope> </dependency> <dependency> <groupid>mysql</groupid> <artifactid>mysql-connector-java</artifactid> <version>8.0.26</version> </dependency> <dependency> <groupid>com.alibaba</groupid> <artifactid>fastjson</artifactid> <version>1.2.76</version> </dependency> <dependency> <groupid>com.baomidou</groupid> <artifactid>mybatis-plus-boot-starter</artifactid> <version>3.4.3</version> </dependency> <dependency> <groupid>org.projectlombok</groupid> <artifactid>lombok</artifactid> <version>1.18.12</version> </dependency> <dependency> <groupid>redis.clients</groupid> <artifactid>jedis</artifactid> <version>3.6.0</version> </dependency> </dependencies>  <properties> <project.build.sourceencoding>utf-8</project.build.sourceencoding> <project.reporting.outputencoding>utf-8</project.reporting.outputencoding> </properties>  <build> <plugins> <plugin> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-maven-plugin</artifactid> </plugin> </plugins> </build></project>
以上按需引入，引入了springboot依赖，mysql驱动，mybatis等等，具体功能请百度
项目结构以我的学生成绩管理系统为例：
config：配置跨域和redis配置
constant：配置与前端交互返回的数据提示和内容
controller：控制层，接收前端的数据
service： service层，处理接收到的数据，主要作功能代码
dto：实体类
mapper：从service到mapper，主要实现数据库的增删改查方法的实现
vo：主要用于构建不同数据的综合的实体类，以及配置与前端交互的数据
utils: 工具类，但是本项目并没有用到
resource/mapper：数据库的增删改查语句
application.yml: 配置数据库驱动和redis配置、服务器端口等等
pom.xml: 依赖
studentscoreapplication.java: 启动类
ps： constant和vo可简化不编写，如不编写数据交互提示，把controller和service
层的返回数据修改为别的数据类型即可，如string
启动类配置想启动项目，必须要有一个入口文件，
代码如下：
package com.studentscore;import org.mybatis.spring.annotation.mapperscan;import org.springframework.boot.springapplication;import org.springframework.boot.autoconfigure.springbootapplication;//声明springboot@springbootapplication//定义mapper区@mapperscan("com.studentscore.mapper")public class studentscoreapplication { public static void main(string[] args) { springapplication.run(studentscoreapplication.class,args); }}
配置跨域只有配置跨域，才能接收到前端的数据请求
原本教程需要配置redis，现在简化，修改为不需要redis，更新时间2022-04-11
package com.studentscore.config;import org.springframework.context.annotation.configuration;import org.springframework.web.servlet.config.annotation.corsregistry;import org.springframework.web.servlet.config.annotation.webmvcconfigurer;/** * @author hxc * @datetime: 2021-12-2 * @description: 跨域配置 * */@configurationpublic class corsconfig implements webmvcconfigurer { @override public void addcorsmappings(corsregistry registry) { //设置允许跨域 registry.addmapping("/**") .allowedorigins("*") // 设置允许跨域请求的域名 .allowedoriginpatterns("*") //设置允许的方法 .allowedmethods("*") .maxage(3600); }}
数据库配置、服务端口application.yml 文件主要是配置数据库和服务器的
server: port: 8081 servlet:# 项目的路径，配置如下之后，它的路径为http:locahost:8081/student context-path: /student# 数据库spring: datasource: username: root url: jdbc:mysql://localhost:3306/mydb password: root driver-class-name: com.mysql.cj.jdbc.driver
在这里要注意的是，context-path,配置了项目的路径
于是本项目路径为：
http:locahost:8081/student
之所以提这个，因为怕你们和后面要讲的contoller的路径搞乱
数据交互ps：如需要简化，此处可不配置
主要有两个文件，一个是resutenum，一个是resutvo
用于与前端数据交互
代码如下
package com.studentscore.constant;import lombok.getter;@getterpublic enum resutenum { ok(2000,"成功"), error(5000,"失败"); resutenum(integer code,string message){ this.code = code; this.message = message; } integer code; string message;}
package com.studentscore.vo;import com.studentscore.constant.resutenum;import lombok.getter;/** * @author hxc * @datetime: 2021-12-4 * @description: 数据交互响应-提示 * */@getterpublic class resultvo<t> { private t data; private integer code; private string message; public resultvo(resutenum resutenum) { this.code = resutenum.getcode(); this.message = resutenum.getmessage(); data = null; } public resultvo(resutenum resutenum,t data) { this.code = resutenum.getcode(); this.message = resutenum.getmessage(); this.data = data; } public resultvo(integer code,string message,t data){ this.code = code; this.message = message; this.data = data; }}
springboot运行顺序以上，springboot的基础配置就已经ok了。
但是，在继续往下写代码，我们得明白，springboot是怎么执行代码的。
其实，我们哪怕只创建一个文件夹，只创建两三个java文件也能编写完一个springboot项目，但是，这样的代码是特别乱的，也不利于维护；因此我们才分层，一个文件夹一个层次，每个层次处理一种类型的功能
首先，我们知道，第一步肯定是从前端接收数据，那么接收到的数据第一步是哪里？
答案就是controller，别的层也可以，但是约定俗成，规定了它作为和前端交互
同理，controller接收到后，传到了service，service编写功能的实现，service再请求到mapper，mappe里编写数据库增删改查的实现
mapper再请求到resource下的mapper.xml，数据库的增删改查语句去查找数据库的数据。
当查到数据库数据后，返回到mapper，再到service，然后回到controller，最后再返回前端。
controller层然后我们再看controller代码，以下所有的都以登录和注册功能作为例子，因为其他功能都和这两个差不多
登录是查询
注册是插入
登录controller：
package com.studentscore.controller;import com.studentscore.service.loginservice;import com.studentscore.vo.resultvo;import com.studentscore.constant.resutenum;import org.springframework.web.bind.annotation.getmapping;import org.springframework.web.bind.annotation.requestmapping;import org.springframework.web.bind.annotation.requestparam;import org.springframework.web.bind.annotation.restcontroller;import javax.annotation.resource;/** * @author hxc * @datetime: 2021-12-2 * @description: 登录controller * */@restcontroller@requestmapping("/login/**")public class logincontroller { @resource private loginservice loginservice; // 登录到系统 @getmapping("/logintosystem") public resultvo logintosystem(@requestparam("username")string username, @requestparam("password")string password) { return new resultvo(resutenum.ok,loginservice.logintosystem(username,password)); } @getmapping("/findname") public resultvo findname(@requestparam("username")string username) { return new resultvo(resutenum.ok,loginservice.findname(username)); }}
ps：如简化不编写数据交互，把resultvo修改为别的类型，如string
这里需要特别说明，其他和它一样
我们看到，它@requestmapping("/login/**")
代表会请求到login路径
@getmapping("/logintosystem")
在login路径下写这个请求，代表它的路径为
/login/logintosystem
细心的人会发现，前端的get和post也有写相同的路径
再结合配置的路径，到请求到这里的时候，最终路径为
http:localhost:8081/student/login/logintosystem
其他同理
注册controller：
package com.studentscore.controller;import com.studentscore.service.registerservice;import com.studentscore.vo.resultvo;import com.studentscore.constant.resutenum;import com.studentscore.dto.account;import org.springframework.web.bind.annotation.*;import javax.annotation.resource;/** * @author hxc * @datetime: 2021-12-2 * @description: 注册controller * */@restcontroller@requestmapping("/register/**")public class registercontroller { @resource private registerservice registerservice; // 注册 @postmapping("/registeraccount") public resultvo registeraccount(@requestbody account account) { return new resultvo(resutenum.ok,registerservice.registeraccount(account)); }}
ps：如简化不编写数据交互，把resultvo修改为别的类型，如string
dto层：实体在请求到下面的service的时候，我们应该要有一个实体去映射，
即和数据库字段相同，账号表
package com.studentscore.dto;import lombok.data;/** * @author hxc * @datetime: 2021-12-2 * @description: 账号登录注册实体 * */@datapublic class account { private string id; // 姓名 private string name; // 账号 private string username; // 密码 private string password;}
ps: 要注意的是，字段名称需要一样，否则会映射失败，到时候拿到的数据是空的
service层登录service
package com.studentscore.service;import com.studentscore.mapper.loginmapper;import org.springframework.stereotype.service;import javax.annotation.resource;/** * @author hxc * @datetime: 2021-12-2 * @description: 登录service * */@servicepublic class loginservice {@resource private loginmapper loginmapper; // 登录 public string logintosystem(string username,string password){ string message = ""; // 判断登录的角色是否为空 if(loginmapper.logintosystem(username,password)== null) { message = "登录失败"; }else { loginmapper.logintosystem(username,password); message = "登录成功"; } return message; } // 获取登录人员的姓名 public string findname(string username) { return loginmapper.findname(username); }}
注册service
package com.studentscore.service;import com.studentscore.mapper.registermapper;import com.studentscore.dto.account;import org.springframework.stereotype.service;import javax.annotation.resource;/** * @author hxc * @datetime:2021-12-2 * @description: 注册service * */@servicepublic class registerservice { @resource private registermapper registermapper; // 注册 public string registeraccount(account account) { registermapper.registeraccount(account); return "注册成功"; }}
mapper层登录mapper
package com.studentscore.mapper;import org.apache.ibatis.annotations.param;/** * @author hxc * @datetime: 2021-12-2 * @description: 登录mapper * */public interface loginmapper { // 登录 string logintosystem(@param("username")string username, @param("password")string password); // 获取登录的人的姓名 string findname(@param("username")string username);}
注册mapper
package com.studentscore.mapper;import com.studentscore.dto.account;import org.apache.ibatis.annotations.param;/** * @author hxc * @datetime: 2021-12-2 * @description: 注册mapper * */public interface registermapper { // 注册 void registeraccount(@param("account")account account);}
数据库查询语句登录：
<?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.studentscore.mapper.loginmapper"> <select id="logintosystem" resulttype="java.lang.string"> select username,password from scorelogin where username=#{username} and password=#{password} </select> <select id="findname" resulttype="java.lang.string"> select name from scorelogin where username=#{username} </select></mapper>
注册：
<?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.studentscore.mapper.registermapper"> <insert id="registeraccount" parametertype="com.studentscore.dto.account" usegeneratedkeys="true" keyproperty="id"> insert into scorelogin (name,username,password) values (#{account.name},#{account.username},#{account.password}) </insert></mapper>
以上就是怎么搭建vue+springboot项目的详细内容。

怎么搭建vue+springboot项目

VIP推荐