springboot+vue部署,vue+springboot项目实战

　　00-1010前言：开发使用的软件、vue项目构建环境配置cmd命令、vue ui创建项目、vue项目生产方向梳理、软件vscode开放项目、vue配置、vue-router如何配置axiosui框架介绍结构、路由器配置request.jsget和post请求vue.config.jsvue完成sp Ringboot创建springboot项目视项目结构、启动类配置配置配置跨域数据库配置、服务端口数据交互springboot运行顺序控制器层dto层：实体服务层映射器层数据库查询语句

　　00-1010最近刚做了一个基于vue springboot的学生成绩管理系统，所以以此为基础总结一下遇到的一些问题。以及vue springboot项目是如何实现的，下面会贴出vue和springboot的重要代码和配置。

目录

思路：写后端springboot代码hbuilderx或VSCode写vue代码navicat或dbeaver写创建数据库表。

前言

　　00-1010设置之前，首先需要安装nodeJs。怎么装就不赘述了，百度一下就好。

开发使用的软件

win R键调出弹出框，输入cmd进入控制台界面。

　　然后，

　　命令行

　　Cd/d路径地址

　　切换到要创建项目的路径。

　　再用

　　vuinit web pack项目名称命令创建一个项目。

　　项目名称：项目名称项目描述：项目描述作者：运行时编译器：运行时和编译器：默认第一次安装路由器：要安装路由吗？选择安装，然后我就不需要用ESLint在安装步骤Lint你的代码了？(Y/n):询问您是否使用eslint限制语法。新人建议是否设置单元测试(Y/n):单元测试。新人选择是否用夜视设置e2e测试？(Y/n):使用Nightwatch设置端到端测试？选择项目创建后我们是否应该为您运行“NPM安装”?如何运行项目：选择npm，然后创建它。找到创建项目的路径，cmd命令行，看看package.json是dev还是serve。

　　——此内容更新于2022年4月11日。

　　此时，package.json文件的内容

　　{name: 项目名称， version 3360 0.1.0 ，//b=version private: true，///运行脚本：serve是启动项目的脚本，要打包项目脚本 scripts 3360 { serve 3360 vue-CLI-service serve-open ， build 3360 vue-CLI-service build }对于build，//安装的vue依赖于文件 dependencies : { vue

　　运行npm运行dev或npm运行serve。

　　00-1010这里推荐第二种创作方式。

　　使用cmd命令行

　　Vuui会打开一个ui。

　　界面，跟着ui提示操作就行

　　打开cmd提示的网页地址：我的是http://localhost:800

　　然后一步步操作：

ps：如果提示不是内部命令信息提示，就需要安装vue组件命令行输入： npm install vue

 

　　更具体的百度搜索操作即可

　　

------------------本内容于2022-04-11更新start-------------------------

vue项目制作方向梳理

在正式开始运行之前先梳理一下创建vue项目需要什么

　　在按照我刚刚的方式创建完vue项目后，（如有勾选安装router的情况）

　　便已经可以通过npm run serve直接运行项目了，（只是有前端部分）；

　　初始它会有一个HelloWorld.vue的组件界面。一运行便能够看到该页面的内容。

　　但是单单有这些是不够的。

　　要制作一个功能齐全的vue项目，最少需要安装这几项：

vue-router :页面跳转和传参一个UI框架组件：根据你需要制作电脑端还是手机端项目去搜索vue ui框架。一般都能够搜索到比较常用的vue ui框架。这些ui框架都会有文档，文档内部有如何安装的npm install 命令。本次的ui框架为elementUiaxios: 目前常用的与后端数据交互的组件，因为我们是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项目了

　　------------------本内容于2022-04-11更新end-------------------------

通过软件vscode打开项目

vscode，找到项目路径（我用的是idea，无所谓用什么软件，直接用cmd也能运行）

　　然后新建终端，输入运行的命令：

　　------------------本内容于2022-04-11更新start-------------------------

　　------------------本内容于2022-04-11更新end-------------------------

运行npm run dev或npm run serve

vue 配置

以下vue代码皆以vue2.x为准！

vue-router

vue-router是vue.js的官方路由管理器，一般用它作页面跳转和跳转时传参。

如何配置

以我的学生管理系统的结构为例：

　　首先需要在vue项目的界面引入vue-router，

　　使用编程软件的终端或者cmd 切换到自己项目的路径下，使用以下代码安装：

npm install vue-router

axios

axios的作用用于于后端异步通信，简单的说就是你想把前端数据传给后端就需要它进行数据交互同样，使用编程软件的终端或者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 vueimport App from ./App.vueimport router from ./routerimport ElementUI from element-uiimport axios from axiosVue.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.vueaddScore.vuedeleteScore.vueupdateScore.vueshowScore.vuemaintry.vue这几个视图组件

　　则，router的index.js代码如下

import Vue from vueimport Router from vue-routerimport Login from @/components/Loginimport maintry from @/views/maintryimport addScore from @/views/addScoreimport deleteScore from @/views/deleteScoreimport showScore from @/views/showScoreimport 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方法

　　------------------本内容于2022-04-11更新start-------------------------

// 这里给大家举一个例子：// 登录和注册界面以及功能<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" :style="bgc">返回</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>

增删改查的思路按照该方法去制作即可

　　------------------本内容于2022-04-11更新end-------------------------

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><!-- springboot--> <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><!-- mysql--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.26</version> </dependency><!-- fastjson--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.76</version> </dependency><!-- mybatis--> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.3</version> </dependency><!-- lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.12</version> </dependency><!-- redis--> <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      

	  




	  
	  
	  
	  
	  
        
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。