vue入门

Vue从入门到深度学习
Vue入门
后端
后端代码
前端代码

1.项目结构
后端

前端

2.后端代码
MybatisPlusConfig.java

package com.example.demo.common;import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;import org.mybatis.spring.annotation.MapperScan;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;@MapperScan( "com.example.demo.mapper" )@Configurationpublic class MybatisPlusConfig{ @Bean public PaginationInterceptor paginationInterceptor(){ return new PaginationInterceptor(); }}

Result.java

package com.example.demo.common;public class Result { private String code; private String msg; private T data; public Result(T data) { } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public T getData() { return data; } public void setData(T data) { this.data = data; }// public Result ok(T t){// this.setCode(0);// this.setMsg("成功");// this.setData(t);// return this;// }//// public Result fail(String msg){// this.setCode(-1);// this.setMsg(msg);// return this;// }// pubLic static Result success() {// Result result = new Result<>();// result、setCode("0");// result 、setMsg("成功");// return result;// pubLic static Result success(T data) {// ResuLt result = new Result<>(data) ;// result、setCode("0");// result 、setMsg("成功");// return result;// }// public static ResuLt error(String code, String msg) {// ResuLt result = new ResuLt() ;// result 、setCode(code);// result 、setMsg(msg);// return result;// } public static Result ok( ) { Result result = new Result<>(); result.setCode("0"); result.setMsg("成功"); return result; } public static Result ok(T data) { Result result = new Result<>(data) ; result、setCode("0"); result 、setMsg("成功"); return result; } public Result fail(String msg){ this.setCode("2"); this.setMsg(msg); return this; } public Result(String code, String msg, T data) { this.code = code; this.msg = msg; this.data = data; this.data=data; } public Result() { }}

UserController.java

package com.example.demo.controller;import com.example.demo.common.Result;import com.example.demo.entity.User;import com.example.demo.mapper.UserMapper;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;@RestController@RequestMapping("/user")public class UserController { @Resource UserMapper userMapper; @PostMapping public Result<?> save(@RequestBody User user) { userMapper.insert(user); return Result.ok(); }}

User.java

package com.example.demo.entity;import com.baomidou.mybatisplus.annotation.IdType;import com.baomidou.mybatisplus.annotation.TableId;import com.baomidou.mybatisplus.annotation.TableName;import lombok.Data;@TableName("user")@Datapublic class User { @TableId(value ="id", type = IdType.AUTO) private Integer id; private String username ; private String nickname; private Integer age; private String sex;}

UserMapper.java

package com.example.demo.mapper;import com.baomidou.mybatisplus.core.mapper.baseMapper;import com.example.demo.entity.User;public interface UserMapper extends baseMapper{}

application.properties

server.port=9090spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.urL=jdbc:mysql://localhost:3306/springboot-vue?seSSL=falsespring.datasource.username=rootspring.datasource.password=root

pom.xml

<?xml version="1.0" encoding="UTF-8"?>4.0.0 pom org.springframework.bootspring-boot-starter-parent2.5.9 com.exampledemo0.0.1-SNAPSHOTdemoDemo project for Spring Boot1.8org.springframework.bootspring-boot-starter-webmysqlmysql-connector-javaruntimeorg.springframework.bootspring-boot-starter-testtestcom.baomidoumybatis-plus-boot-starter3.4.2org.mybatis.spring.bootmybatis-spring-boot-starter2.2.2com.baomidoumybatis-plus-extension3.4.2org.projectlomboklombok1.16.18

前端代码
components/global.css

* { margin: 0; padding: 0; box-sizing: border-box;}

3.前端代码
Aside.vue

components/Header.vue

router/index.js

import { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'const routes = [ { path: '/', name: 'Home', component: Home }]const router = createRouter({ history: createWebHistory(process.env.base_URL), routes})export default router

store/index.js

import { createStore } from 'vuex'export default createStore({ state: { }, mutations: { }, actions: { }, modules: { }})

utils/request.js

import axios from 'axios'const request = axios.create({ // baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！ timeout: 5000})// request 拦截器// 可以自请求发送前对请求做一些处理// 比如统一加token，对请求参数统一加密request.interceptors.request.use(config => { config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 设置请求头return config}, error => { return Promise.reject(error)});// response 拦截器// 可以在接口响应后统一处理结果request.interceptors.response.use( response => { let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') { return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') { res = res ? JSON.parse(res) : res}return res;},error => { console.log('err' + error) // for debug return Promise.reject(error)})export default request

views/Home.vue

App.vue

main.js

import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'// import ElementPlus from 'element-plus'import zhCn from 'element-plus/es/locale/lang/zh-cn'import '@/assets/css/global.css'createApp(App).use(store).use(router).use(ElementPlus ,{locale: zhCn,size:'small'}).mount('#app')