- 创建Vue工程
- 安装Element UI、axios插件
- 安装echarts
cnpm install echarts@4.9.0 --save
main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
echarts模板文件,需要不同的图去Echarts官网
<template>
<div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
export default {
name: 'Echarts',
mounted(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
text: '水果销量统计',
left: 'center',
top: 20,
textStyle: {
color: '#555555'
}
},
tooltip: {},
xAxis: {
data: [
"苹果",
"香蕉",
"橘子",
"火龙果",
"葡萄",
"西瓜"
]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [
{
value: 333,
itemStyle: {
color: "#3fb1e3"
}
},
{
value: 133,
itemStyle: {
color: "#c4ebad"
}
},
{
value: 99,
itemStyle: {
color: "#c4ebad"
}
},
{
value: 222,
itemStyle: {
color: "#6be6c1"
}
},
{
value: 399,
itemStyle: {
color: "#3fb1e3"
}
},
{
value: 123,
itemStyle: {
color: "#c4ebad"
}
}
]
}]
});
}
}
</script>
Element UI 表格嵌入图片
<template slot-scope="scope">
<img :src="scope.row.icon" style="height: 70px"/>
</template>
Vue表单的数据校验
<template>
<el-form ref="fruitRules" :model="fruit" :rules="rules" label-width="80px" class="demo-ruleForm" style="width: 600px">
<el-form-item label="名称" prop="name">
<el-input v-model="fruit.name"></el-input>
</el-form-item>
<el-form-item label="销量" prop="sale">
<el-input v-model.number="fruit.sale"></el-input>
</el-form-item>
<el-form-item label="图片" prop="icon">
<el-input v-model="fruit.icon"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('fruitRules')">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "Add",
data() {
return {
fruit: {
name: '',
sale: '',
icon: ''
},
rules:{
name:[
{ required: true, message: '请输入水果名称', trigger: 'blur' }
],
sale:[
{ required: true, message: '请输入销量', trigger: 'blur' },
{ type: 'number', message: '销量必须为数字值'}
],
icon:[
{ required: true, message: '请输入图片链接', trigger: 'blur' }
]
}
}
},
methods: {
onSubmit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
let _this = this
axios.post('http://localhost:8181/fruit/add',this.fruit).then(function (response) {
if(response.data){
_this.$alert(_this.fruit.name+'添加成功!', '添加数据', {
confirmButtonText: '确定',
callback: action => {
//跳转到/table
_this.$router.push('/table')
}
});
}
})
}
});
}
}
}
</script>
<style scoped>
</style>
Vue的登录功能实现
<template>
<div class="login-wrap">
<el-form class="login-container" ref="loginFormRef" :model="loginForm">
<h1 class="title">用户登陆</h1>
<el-form-item label="">
<el-input type="text" placeholder="用户账号" v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="">
<el-input type="text" placeholder="用户密码" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<template slot-scope="scope">
<el-button type="primary" @click="doLogin()" style="width: 100%;">用户登录</el-button>
<!-- <el-button style="width: 48%;" @click="gotoRegister" >用户注册</el-button> -->
</template>
</el-form-item>
<el-row style="text-align: center;">
<el-link @click="gotoRegister()">用户注册</el-link>
<el-link>忘记密码</el-link>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data: function () {
return {
loginForm: {
username: '',
password: '',
}
}
},
methods: {
gotoRegister: function () {
this.$router.push({
name: 'register'
});
},
doLogin(){
this.$refs.loginFormRef.validate(async valid => {
if( !valid ) return;
const{data:res} = await this.axios.post("http://106.14.223.42:8181/user/login",this.loginForm)
if( res == "ok" ){
this.$message.success("操作成功")
this.$router.push({path:"/index"});
}else{
this.$message.error("操作失败")
}
})
}
}
}
</script>
//scoped="scoped" 表示样式仅仅规范当前VUE
<style scoped="scoped">
.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-repeat: no-repeat;
background-position: center right;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0px auto;
width: 350px;
padding: 30px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
text-align: left;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
Vue的页面显示
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column fixed prop="id" label="习题id" width="150">
</el-table-column>
<el-table-column prop="name" label="习题名称" width="200">
</el-table-column>
<el-table-column prop="chapter" label="章节" width="200"> </el-table-column>
<el-table-column prop="knowledge" label="知识点" width="200">
</el-table-column>
<el-table-column prop="difficulty" label="难度" width="150"> </el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button @click="updateExercise(scope.row)" type="text" size="mesdium"
>修改</el-button
>
<el-button @click="deleteExercise(scope.row)" type="text" size="medium"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
updateExercise(row) {
this.$router.push('/updateExercise?id='+row.id)
},
deleteExercise(row) {
let _this=this
this.$confirm('是否确定删除'+row.name+'?','删除数据',{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
axios.delete('http://106.14.223.42:8181/exercise/delete/'+row.id).then(function (response){
if(response.data){
_this.$alert(row.name+'删除成功!', '删除数据',{
confirmButtonText: '确定',
callback: action =>{
location.reload()
}
});
}
})
}).catch(()=>{
});
},
},
created(){
let _this=this;
axios.get("http://106.14.223.42:8181/exercise/list").then(function (response){
_this.tableData=response.data
})
},
data() {
return {
tableData: null,
};
},
};
</script>
Vue的数据修改
<template>
<div>
<h2>修改习题</h2>
<el-form style="width: 60%" ref="form" :model="form" label-width="120px">
<el-form-item label="习题名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="所属章节">
<el-select v-model="form.chapter" placeholder="请选择章节">
<el-option label="章节一" value="Html"></el-option>
<el-option label="章节二" value="CSS"></el-option>
<el-option label="章节三" value="JS"></el-option>
<el-option label="章节四" value="vue"></el-option>
<el-option label="章节五" value="element"></el-option>
</el-select>
</el-form-item>
<el-form-item label="考察知识点">
<el-input v-model="form.knowledge"></el-input>
</el-form-item>
<el-form-item label="难度">
<el-radio-group v-model="form.difficulty">
<el-radio label="高"></el-radio>
<el-radio label="中"></el-radio>
<el-radio label="低"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="题型">
<el-select v-model="form.type" placeholder="请选择题型">
<el-option label="单选题" value="单选"></el-option>
<el-option label="多选题" value="多选"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选项一">
<el-input v-model="form.option1"></el-input>
</el-form-item>
<el-form-item label="选项二">
<el-input v-model="form.option2"></el-input>
</el-form-item>
<el-form-item label="选项三">
<el-input v-model="form.option3"></el-input>
</el-form-item>
<el-form-item label="选项四">
<el-input v-model="form.option4"></el-input>
</el-form-item>
<el-form-item label="答案">
<el-input v-model="form.answer"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">修改</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: "",
chapter: "",
knowledge: "",
difficulty: "",
type: "",
option1: "",
option2: "",
option3: "",
option4: "",
answer:""
},
};
},
created(){
let id=this.$route.query.id
let _this=this
axios.get('http://106.14.223.42:8181/exercise/find/'+id).then(function (response){
_this.form = response.data
})
},
methods: {
onSubmit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
let _this = this
axios.put('http://106.14.223.42:8181/exercise/update',this.form).then(function (response) {
if(response.data){
_this.$alert(_this.form.name+'修改成功!', '修改数据', {
confirmButtonText: '确定',
callback: action => {
//跳转到/table
_this.$router.push('/exercise')
}
});
}
})
}
});
},
},
};
</script>
<style>
h2{
margin: 20px 120px;
}
</style>
pom.xml 导入 MBP 依赖
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity</artifactId>
<version>1.7</version>
</dependency>
代码生成器
package com.southwind;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
public class GenerateTest {
public static void main(String[] args) {
//创建generator对象
AutoGenerator autoGenerator = new AutoGenerator();
//数据源
DataSourceConfig dataSourceConfig = new DataSourceConfig();
dataSourceConfig.setDbType(DbType.MYSQL);
dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
dataSourceConfig.setUsername("root");
dataSourceConfig.setPassword("123456");
dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/test11");
autoGenerator.setDataSource(dataSourceConfig);
//全局配置
GlobalConfig globalConfig = new GlobalConfig();
globalConfig.setOutputDir(System.getProperty("user.dir")+"/src/main/java");
globalConfig.setAuthor("admin");
globalConfig.setOpen(false);
globalConfig.setServiceName("%sService");
autoGenerator.setGlobalConfig(globalConfig);
//包信息
PackageConfig packageConfig = new PackageConfig();
packageConfig.setParent("com.southwind");
packageConfig.setEntity("entity");
packageConfig.setMapper("mapper");
packageConfig.setService("service");
packageConfig.setServiceImpl("service.impl");
packageConfig.setController("controller");
autoGenerator.setPackageInfo(packageConfig);
//策略配置
StrategyConfig strategyConfig = new StrategyConfig();
strategyConfig.setInclude("fruit");
strategyConfig.setNaming(NamingStrategy.underline_to_camel);
strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel);
strategyConfig.setEntityLombokModel(true);
autoGenerator.setStrategy(strategyConfig);
//运行
autoGenerator.execute();
}
}
application.yml
spring:
datasource:
url: jdbc:mysql://localhost:3306/test11
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
mapper-locations: classpath:com/southwind/mapper/xml/*.xml
server:
port: 8181
跨域问题的解决方案
package com.southwind.configuration;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CrosConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}