SpringBoot+Vue實現數據添加功能
一、添加代碼生成器
用來自動為數據庫映射類建立：mapper、service、controller
註：代碼生成器的寫法，參考官方文檔：https://mp.baomidou.com/
package com.hanmh.utils;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
import com.hanmh.pojo.BasePojo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class HanGenerator {
public static void main(String[] args) {
// 代碼生成器
AutoGenerator mpg = new AutoGenerator();
// 全局配置
GlobalConfig gc = new GlobalConfig();
//這樣獲取到的是父項目的目錄
String projectPath = System.getProperty("user.dir");
String pojoProject = "pojo" + "/src/main/java/com/hanmh/pojo";
String otherProject = "admin";
//gc.setOutputDir(projectPath + "/src/main/java");
gc.setAuthor("hanmh");
gc.setOpen(false);
// gc.setSwagger2(true); 實體屬性 Swagger2 註解
mpg.setGlobalConfig(gc);
// 數據源配置
DataSourceConfig dsc = new DataSourceConfig();
dsc.setUrl("jdbc:mysql://39.105.231.52:3306/db?useUnicode=true&useSSL=false&characterEncoding=utf8");
// dsc.setSchemaName("public");
dsc.setDriverName("com.mysql.jdbc.Driver");
dsc.setUsername("root");
dsc.setPassword("123456");
mpg.setDataSource(dsc);
// 包配置
PackageConfig pc = new PackageConfig();
pc.setParent("com.hanmh"); //設置父包
//自定義生成路徑
Map<String,String> pathInfo = new HashMap<String,String>();
pathInfo.put("entity_path", projectPath + "/" + pojoProject); //pojo位置
pathInfo.put("controller_path", projectPath + "/" + otherProject + "/src/main/java/com/hanmh/controller");
pathInfo.put("service_impl_path", projectPath + "/" + otherProject + "/src/main/java/com/hanmh/service/impl");
pathInfo.put("service_path", projectPath + "/" + otherProject + "/src/main/java/com/hanmh/service");
pathInfo.put("mapper_path", projectPath + "/" + otherProject + "/src/main/java/com/hanmh/mapper");
pathInfo.put("xml_path", projectPath + "/" + otherProject + "/src/main/resources/com/hanmh/mapper");
pc.setEntity("pojo"); //實體類
pc.setPathInfo(pathInfo);
mpg.setPackageInfo(pc);
// 自定義配置
InjectionConfig cfg = new InjectionConfig() {
@Override
public void initMap() {
// to do nothing
}
};
// 如果模板引擎是 freemarker
String templatePath = "/templates/mapper.xml.ftl";
// 策略配置
StrategyConfig strategy = new StrategyConfig();
strategy.setNaming(NamingStrategy.underline_to_camel);
strategy.setColumnNaming(NamingStrategy.underline_to_camel);
//生成時，繼承的父類
strategy.setSuperEntityClass(BasePojo.class);
strategy.setEntityLombokModel(true);
strategy.setRestControllerStyle(true);
// 公共父類
strategy.setSuperControllerClass("你自己的父類控制器,沒有就不用設置!");
// 寫於父類中的公共字段
strategy.setSuperEntityColumns("id");
strategy.setInclude("ums_admin");
strategy.setControllerMappingHyphenStyle(true);
strategy.setTablePrefix(pc.getModuleName() + "_");
mpg.setStrategy(strategy);
mpg.setTemplateEngine(new FreemarkerTemplateEngine());
mpg.execute();
}
}
二、導入需要的jar包
前期需要導入的包有：mybatis-plus、mysql、duracloud（工具包）、pojo、spring-boot-starter-web
<dependency> <groupId>com.hanmh</groupId> <artifactId>pojo</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <dependency> <groupId>org.duracloud</groupId> <artifactId>common</artifactId> </dependency>
三、創建啟動類
啟動類必須創建在父包下面，註意在SpringBoot中，並不是不掃包，而是框架幫助完成瞭這件事，它會掃描啟動類所在包下的所有類及其子包中的類
package com.hanmh;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.hanmh.mapper")
public class AdminRun {
public static void main(String[] args) {
SpringApplication.run(AdminRun.class);
}
}
四、創建配置文件（application.yml）
server: port: 8080 spring: application: name: admin datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://39.105.231.52:3306/db?useUnicode=true&useSSL=false&characterEncoding=utf8 username: root password: 123456 hikari: maximum-pool-size: 20 minimum-idle: 10 servlet: #文件傳輸配置 multipart: max-file-size: 5MB max-request-size: 10MB #運行的過程中輸出sql語句（日志信息） logging: level: com.hanmh.mapper: debug
五、返回值統一定義
1、ResultJson
package com.hanmh.pojo;
import lombok.Data;
@Data
public class ResultJson {
private Integer code; //200成功，500錯誤
private Object obj;
private String message;
public ResultJson(ResultCode resultCode, Object obj) {
this.code = resultCode.getCode();
this.message = resultCode.getMessage();
this.obj = obj;
}
public ResultJson(ResultCode resultCode, Object obj, String message) {
this.code = resultCode.getCode();
this.message = message;
this.obj = obj;
}
public static ResultJson success(Object obj) {
return new ResultJson(ResultCode.SUCCESS, obj);
}
public static ResultJson success(Object obj, String message) {
return new ResultJson(ResultCode.SUCCESS, obj, message);
}
public static ResultJson error(Object obj) {
return new ResultJson(ResultCode.ERROR, obj);
}
public static ResultJson error() {
return new ResultJson(ResultCode.ERROR, null);
}
public static ResultJson error(String message) {
return new ResultJson(ResultCode.ERROR, null, message);
}
}
2、ResultCode
定義4種返回代號和返回信息，使用枚舉類進行實現
package com.hanmh.pojo;
import lombok.Data;
import lombok.Getter;
@Getter
public enum ResultCode {
SUCCESS(200, "請求成功"),
ERROR(500, "請求失敗"),
NOAUTH(401, "用戶未登錄或者登錄超時"), //操作時
NOPREMISSION(403, "沒有此權限");
private Integer code;
private String message;
//枚舉類型的構造默認為私有
private ResultCode(Integer code, String message) {
this.code = code;
this.message = message;
}
}
六、創建基礎pojo
在所有的數據庫表種，共有的字段是ID，現在將id獨立出來
1、導入 mybatis-plus-annotation包
為瞭使用該包內部的IdType等類內部提供的註解，以告訴BasePojo中某些字段在數據庫表中的存在與否
<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-annotation</artifactId> <version>3.0-RELEASE</version> </dependency>
2、BasePojo類
package com.hanmh.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import org.omg.CORBA.IDLType;
@Data
public class BasePojo {
@TableId(type = IdType.AUTO)
private Integer id;
//做分頁操作需要的字段
@TableField(exist = false)
private Integer pageNO;
@TableField(exist = false)
private Integer pageSize;
}
七、後端添加數據
1、密碼加密
（1）需要使用安全包提供加密服務（security）
<dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-core</artifactId> </dependency>
2、將加密類（BCryptPasswordEncoder）放入IOC容器
在SpringBoot環節，需要將某個類加入IOC容器，就需要在配置類中，配置@Bean節點
@Configuration
public class AdminConfig {
@Bean
//將BCryptPasswordEncoder放進IOC容器
BCryptPasswordEncoder getPasswordEncoder() {
return new BCryptPasswordEncoder();
}
}
註：使用此方法對數據進行加密的原因：此加密方法相同明文密碼多次可以生成不同的密文，而MD5相同密碼則會生成相同的密文
3、後端添加數據簡單實現
@PostMapping("/add")
ResultJson add(UmsAdmin umsAdmin) throws InterruptedException, IOException {
//對密碼加密
umsAdmin.setPassword(passwordEncoder.encode(umsAdmin.getPassword()));
//TimeUnit.SECONDS.sleep(2);
return ResultJson.success(adminService.save(umsAdmin), "添加用戶成功");
}
八、前端頁面添加功能
1、添加用戶（按鈕和彈窗）
<el-button>：elementUI按鈕標簽 <el-button type="primary" plain @click="add">添加用戶</el-button> <!-- <el-dialog> 代表彈窗 :visible.sync表示顯示或隱藏--> <!-- close-on-click-modal代表點擊對話框以外區域是否可以關閉 --> <el-dialog :title="dialog.title" :visible.sync="dialog.show" :close-on-click-modal="false" width="450px"> <AdminEdit :show.sync="dialog.show" v-if="dialog.show"></AdminEdit> </el-dialog>
（1）添加用戶功能
add() {
this.dialog.show = true
this.dialog.title = "添加用戶"
}
（2）添加內容彈窗
<template>
<div>
<el-form :model="forms" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="登錄名" prop="loginName">
<el-input v-model="forms.loginName" placeholder="請輸入登錄名"></el-input>
</el-form-item>
<el-form-item label="昵稱" prop="name">
<el-input v-model="forms.name" placeholder="請輸入昵稱"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="forms.password" placeholder="請輸入密碼" show-password></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="forms.email" placeholder="請輸入郵箱"></el-input>
</el-form-item>
<el-form-item label="手機號" prop="phone">
<el-input v-model="forms.phone" placeholder="請輸入手機號"></el-input>
</el-form-item>
<el-form-item label="頭像" prop="imgobj">
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" plain @click="save">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
name: 'AdminEdit',
props:{
show:{
type: Boolean
}
},
data(){
return {
forms: {
loginName: '',
name: '',
password: '',
email: '',
phone: '',
imgobj: '這是一張圖片'
},
rules:{
loginName:[
{required: true, message: '請輸入登錄名', trigger: 'blur'},
{min : 1, max: 20, message: '長度在1-20之間', trigger: 'change'}
],
name:[
{required: true, message: '請輸入昵稱', trigger: 'blur'},
{min : 1, max: 20, message: '長度在1-20之間', trigger: 'change'}
],
password:[
{required: true, message: '請輸入密碼', trigger: 'blur'},
{min : 1, max: 100, message: '長度在1-100之間', trigger: 'change'}
],
email:[
{required: true, message: '請輸入郵箱', trigger: 'blur'},
{min : 1, max: 50, message: '長度在1-50之間', trigger: 'change'},
{type: 'email', message: '請輸入正確格式的郵箱', trigger: 'blur'}
],
phone:[
{required: true, message: '請輸入電話號', trigger: 'blur'},
{min : 1, max: 20, message: '長度在1-20之間', trigger: 'change'},
{pattern: /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/, message: '請輸入正確的手機號', trigger: 'blur'}
],
}
}
},
methods:{
save() {
//提交表單前需要對表單再次進行驗證
//獲取表單對象
//表單二次驗證
this.$refs['ruleForm'].validate((flag) => {
//如果通過驗證，則進行表單數據提交
if(flag === true) {
this.request('/umsadmin/add', 'post', this.forms, response => {
this.$message.success(response.message)
})
}
})
},
changeimg(file, fileList) {
this.forms.imgobj = file.raw
},
removeimg() {
this.forms.imgobj = null
}
}
}
</script>
<style>
</style>
2、此時前端給後端發post請求會出現跨域錯誤
跨域錯誤解決需要在後端植入跨域過濾器（Bean節點）
//跨域問題解決
@Bean
CorsFilter getCorsFilter() {
UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOrigin("*"); //域名
configurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(configurationSource);
}
到此這篇關於SpringBoot+Vue實現數據添加功能的文章就介紹到這瞭,更多相關SpringBoot Vue數據添加內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- Springboot Mybatis Plus自動生成工具類詳解代碼
- SpringBoot項目使用mybatis-plus逆向自動生成全套代碼
- Mybatis-Plus 全局配置無效的解決方案
- 一篇超詳細的SpringBoot整合MybatisPlus的文章
- mybatis-plus 如何配置邏輯刪除