教你如何制作vue+springboot项目

前言

最近刚刚做了一个基于vue+springboot的学生成绩管理系统，于是基于这点，对遇到的一些问题进行一些配置的汇总。以及vue+springboot项目是怎么实现的，以下将贴出vue和springboot的重要代码和配置。

开发使用的软件

idea： 编写后端springboot代码
hbuilderx或VSCode编写vue代码
navicat或者dbeaver 编写创建数据库表

vue项目搭建

环境配置

在搭建之前，
为了构建Vue：需要安装nodeJs，具体如何安装就不多赘述，百度即可。
为了构建Springboot: 需要配置java的jdk，具体如何配置就不多赘述，百度即可。

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

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

此时的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"
  ]
}



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


运行
npm run dev
或
npm run serve

vue ui 创建项目

这里给大家推荐第二种方式创建
使用cmd命令行

vue ui

会打开一个ui界面，跟着ui提示操作就行

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

然后一步步操作：

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

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


------------------本内容于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框架为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-if
v-else-if
v-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
同样ÿ