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" )
@Configuration
public class MybatisPlusConfig{
@Bean
public PaginationInterceptor paginationInterceptor(){
return new PaginationInterceptor();
}
}
Result.java
package com.example.demo.common;
public class Result<T> {
private String code;
private String msg;
private T data;
public <T> 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 <T> Result<T> success(T data) {
// ResuLt<T> 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 <T> Result<T> ok(T data) {
Result<T> 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")
@Data
public 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<User>{
}
application.properties
server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.urL=jdbc:mysql://localhost:3306/springboot-vue?seSSL=false
spring.datasource.username=root
spring.datasource.password=root
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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<packaging>pom</packaging>
<modules>
<!--<module>springboot</module>-->
</modules>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.9</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--<dependency>-->
<!--<groupId>org.projectlombok</groupId>-->
<!--<artifactId>lombok</artifactId>-->
<!--<optional>true</optional>-->
<!--</dependency>-->
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<!--<dependency>-->
<!--<groupId>org.projectlombok</groupId>-->
<!--<artifactId>lombok</artifactId>-->
<!--<version>1.16.8</version>-->
<!--</dependency>-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--<dependency>-->
<!--<groupId>com.baomidou</groupId>-->
<!--<artifactId>mybatis-plus-boot-starter</artifactId>-->
<!--<version>3.5.1</version>-->
<!--</dependency>-->
<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-extension -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-extension</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.18</version>
</dependency>
</dependencies>
<build>
<plugins>
<!--<plugin>-->
<!--<groupId>org.springframework.boot</groupId>-->
<!--<artifactId>spring-boot-maven-plugin</artifactId>-->
<!--<configuration>-->
<!--<excludes>-->
<!--<exclude>-->
<!--<groupId>org.projectlombok</groupId>-->
<!--<artifactId>lombok</artifactId>-->
<!--</exclude>-->
<!--</excludes>-->
<!--</configuration>-->
<!--</plugin>-->
</plugins>
</build>
</project>
前端代码
components/global.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
3.前端代码
Aside.vue
<template>
<div>
<el-menu
style="width: 200px;min-height: 100vh;"
default-active="2"
class="el-menu-vertical-demo">
<!-- @open="handleOpen"-->
<!-- @close="handleClose"-->
<!-- <el-sub-menu index="1">-->
<el-sub-menu index="1-4">
<template #title>选项1</template>
<el-menu-item index="1-4-1">选项1-1</el-menu-item>
</el-sub-menu>
<!-- </el-sub-menu>-->
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>选项2</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>选项3</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>选项4</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>
components/Header.vue
<template>
<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
<div style="width: 200px; padding-Left: 30px; font-weight: bold; color: dodgerblue" >后台管理</div>
<div style="flex: 1"></div>
<div style="width: 100px">
<!-- 下拉框-->
<el-dropdown>
<!-- <span class="el-dropdown-link">下拉菜单<el-icon class="el-icon--right"><arrow-down />-->
<span class="el-dropdown-link">张三<el-icon class="el-icon--right"><arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出系统</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
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
<template xmlns:el-form="http://www.w3.org/1999/xhtml">
<!-- <div class="home">-->
<div style="padding: 10px">
<!-- <img alt="Vue logo" src="../assets/logo.png">-->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!-- Home-->
<!-- <el-button>按钮</el-button>-->
<!--功能区域-->
<div style=" margin: 10px 0">
<el-button type="primary" @click="add">新增</eL-button>
<el-button type="primary">导入</eL-button>
<el-button type="primary">导出</eL-button>
</div>
<!-- 搜索区域-->
<div style=" margin: 10px 0">
<el-input v-model="search" placeholder="请输入关键字" style="width: 20%"/>
<el-button type="primary" style="margin-left: 5px">查询</eL-button>
</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="ID" sortable=""/>
<el-table-column prop="username" label="用户名" />
<el-table-column prop="nickName" label="昵称" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="sex" label="性别" />
<el-table-column prop="address" label="地址" />
<el-table-column fixed="right" label="操作" width="120">
<!-- <template #default>-->
<!--<!– <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>–>-->
<!-- <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--<!– <el-button type="text" size="small">删除</el-button>–>-->
<!-- <el-popconfirm title="确认删除吗?" >-->
<!-- <template #reference>-->
<!-- <el-button type="text" >删除</el-button>-->
<!-- </template>-->
<!-- </el-popconfirm>-->
<!-- </template>-->
<!-- -->
<!-- <template #default="scope">-->
<!-- <el-button size="mini" @click="handLeEdit(scope.$index, scope.row)">编辑</el-button>-->
<!-- <el-popconfirm titLe= "确定删除吗? ">-->
<!-- <tempLate #reference>-->
<!-- <el-button size="mini" type= "danger" @cLick="handleDelete (scope.$index, scope.row)" >删除</el-button>-->
<!-- </template>-->
<!-- </el-popconfirm>-->
<!-- </tempLate>-->
<!-- -->
<!-- -->
<template #default>
<!-- <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>-->
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<!-- <el-button type="text" size="small">删除</el-button>-->
<el-popconfirm title="确认删除吗?" >
<template #reference>
<el-button type="text" >删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style=" margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[5, 10, 20]"
:page-size="10"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
<el-dialog v-model="dialogVisible" title="提示" width="30%" >
<el-form :model="form" label-width="120px">
<el-form-item label="用户名">
<el-input v-model="form.username" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="form.nickanme" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.sex" label="男">男</el-radio>
<el-radio v-model="form.sex" label="女">女</el-radio>
<el-radio v-model="form.sex" label="未知">未知</el-radio>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<!--<el-button type="primary" @click="dialogVisible = false">确定</el-button>-->
<el-button type="primary" @click="save">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";
export default {
name: 'Home',
components: {
},
data(){
return{
search: '',
currentPage: 1,
total: 10,
dialogVisible: false,
form: {},
tableData : [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
]
}
},methods: {
add(){
this.dialogVisible=true;
this.form={}
},
save(){
request.post("/api/user",this.form).then(res=>{
console.log(res)
})
},
handleEdit(){
},handleSizeChange(){
},handleCurrentChange(){
}
}
}
</script>
App.vue
<template>
<div >
<!-- <router-link to="/">Home</router-link> |-->
<!-- <router-link to="/about">About</router-link>-->
<!-- 头部-->
<Header/>
<!-- 主体部分-->
<div style="display: flex">
<!-- 侧边栏-->
<Aside/>
<!-- 内容-->
<router-view style="flex: 1"/>
</div>
</div>
</template>
<style >
</style>
<script>
import Header from "./components/Header";
import Aside from "./components/Aside";
export default {
name: "Layout",
components: {
Header, Aside
}
}
</script>
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')
扫一扫
4391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
