Vue综合案例

一、创建Vue项目

创建项目的前提，具备环境：node+npm+vue

版本：Vue3.x

1.1 创建Vue项目

切换目录（英文路径）
vue create vueproject2
选择初始模块：

一路下一步，等待创建成功

成功地标识

1.2 运行项目

进入到项目文件夹
cd vueproject2
执行运行命令
npm run serve
需要点时间，等待运行成功

1.3 使用IDE打开项目

常见的IDE:Idea HbuildX Vs WebStrom等等

src:源码，需要编写
assets:静态资源
router:路由，注册组件
store:存储，Vuex状态管理
components:组件，局部功能模块的封装
views:页面，模拟真正的页面
app.vue:入口，页面的总入口
main.js:全局配置文件，导入、引用

二、准备项目需要的第三方

Vue.js（基础，基本语法）+Vue-cli（脚手架，创建Vue项目）+Vue-router（路由，实现组件跳转）+VueX（状态管理，存储数据，实现跨组件共享）+Vant（开源的Vue的组件库，移动端App）+Axios（页面请求接口的工具，类似Ajax）

2.1 配置Vant

a.下载js库
npm i vant@3

b.配置vant
在main.js中实现vant的配置
import { createApp } from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ import store from ‘./store’ //导入 import Vant from ‘vant’ import ‘vant/lib/index.css’ createApp(App).use(store).use(router). use(Vant). mount(‘#app’)
c.使用
在vue页面中使用vant的组件

2.2 配置axios

a.下载js库
npm install —save axios vue-axios

b.实现配置
在main.js配置axios

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//导入
import Vant from 'vant'
import 'vant/lib/index.css'
createApp(App).use(store).use(router).
use(Vant).
mount('#app')

d.运行查看效果

三、综合案例

3.1 需求

实现一个学员体温统计模块，要是实现体温新增、体温查询列表
包括：页面+接口+数据库

3.2 设计

数据库表，记录学员的体温信息
学员体温表：
create table t_studenttem( id int primary key auto_increment, sname varchar(10), temp double comment ‘体温’, ctime datetime );

3.3 编写接口

实体层
持久层
业务层
控制层
@RestController @RequestMapping(“/api/temp/“) @Api(value = “学员体温相关操作”,tags = “学员体温相关操作”) public class StudentTempController { @Autowired private StudentTempService service; @PostMapping(“save.do”) public R save(StudentTemp temp){ return service.save(temp); } @GetMapping(“all.do”) public R all(){ return service.queryAll(); } }
运行测试后端接口

3.4 编写页面

3.5 集成测试