Related Technology Stack
1.Vue-cli3+elementUI
2.Spring Boot
Front-end related preparations:
1. Login page layout
<template>
<div class="login">
<router-link to="/">Login</router-link> |
<router-link to="/register">Register</router-link>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="Username" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Password" prop="pwd">
<el-input type="password" v-model="ruleForm.pwd"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">submit</el-button>
<el-button @click="resetForm('ruleForm')">reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
Copy the code2. Login JS code
<script> export default { // name: 'home', data () { return { ruleForm: { name:'', pwd: '' }, rules: { name: [{required: true, message :' Please enter user name ',trigger: 'blur'}], PWD: [{required: true, message :' Please enter password ',trigger: 'blur'}] } } }, components: { // HelloWorld }, methods: $refs[formName].validate((valid) => {if (valid) {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) { var that=this // alert('submit'); this.$ajax.post('http://localhost:8888/demo/login',{"name":this.ruleForm.name,"pwd":this.ruleForm.pwd}) .then(function(res){ console.log(res.data); Json string: {status: false, token: ""} Var status = res.data.status if(status === true){that.$router.push("/home")} console.log(status) {return $router.push("/home")} console.log(status); }) .catch(function (err) { console.log(err) }) } else { console.log('error submit'); return false } }); }, resetForm(formName){ this.$refs[formName].resetField(); } } } </script>Copy the code3. Registration page layout
<template>
<div class="login">
<router-link to="/">Login</router-link> |
<router-link to="/register">Register</router-link>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="Username" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="Password" prop="pwd">
<el-input type="password" v-model="ruleForm.pwd"></el-input>
</el-form-item>
<el-form-item label="Confirm password" prop="repwd">
<el-input type="password" v-model="ruleForm.repwd"></el-input>
</el-form-item>
<el-form-item>
<el-button class="button" type="primary" @click="submitForm('ruleForm')">registered</el-button>
</el-form-item>
</el-form>
</div>
</template>
Copy the codeBecause the function is simply implemented, there is no beautification of the layout style.
<style scoped>
.button{
width: 100%;
margin-top: 20px;
}
</style>
Copy the code4. Registered JS code
<script> export default { // name: 'home', data () {return {// First: declare second: bind to v-model third: this.ruleform. PWD ruleForm: {name: ", PWD: ", repwd: "}, rules: {name: [{required: true, message :' Please enter user name ',trigger: 'blur'}], PWD: [{required: True, message :' Please enter password ',trigger: 'blur'}], repwd: [{required: true, message :' Please enter password again ',trigger: 'blur'}] } } }, components: { // HelloWorld }, methods: {submitForm(formName) {this.$refs[formName]. Validate ((valid) => {if (valid) {var that=this; If (this.ruleform.pwd == this.ruleform.repwd){console.log(' password equal ') this.$ajax.post('http://localhost:8888/demo/register',{"name":this.ruleForm.name,"pwd":this.ruleForm.pwd}) .then(function(res){ console.log(res.data); var status = res.data.status if(status === true){ that.$router.push("/register") } }) .catch(function (err) { Console. log(err)})}else{this.$message.error(' error submit')} console.log('error submit'); return false } }); }, resetForm(formName){ this.$refs[formName].resetField(); } } } </script>Copy the code5. Create a home page and go to the home page after successful login
<template>
<div class="home">
<h1>hello</h1>
</div>
</template>
Copy the codeBack-end related preparations
1. Write interfaces for login and registration
@RestController
//RequestMapping is a URL block that provides external access
@RequestMapping("demo")
//@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
public class Controller {
@Autowired
private UserMapper userMapper;
//------------------------------------------------------------------------------------------------------
@RequestMapping(value = "login", consumes="application/json", method = RequestMethod.POST)
public Map<String,Object> login(@RequestBody Map<String,Object> map){
System.out.println("login");
System.out.println(map.get("name").toString());
System.out.println(map.get("pwd").toString());
Map.get ("name") gets the name value from the front end
String name = (String)map.get("name");
String pwd = (String)map.get("pwd");
Map<String,Object> resultMap = new HashMap<>();
List<User> list = userMapper.selectAll();
for(int i = 0; i<list.size(); i++){ System.out.println(list.get(i).toString()); }/ / determine
if("admin".equals(name)&& "123456".equals(pwd)){
resultMap.put("status".true);
resultMap.put("token", UUID.randomUUID().toString().replaceAll("-".""));
}else {
resultMap.put("status".false);
resultMap.put("token"."");
}
// System.out.println("tessss");
return resultMap;
}
/ / register
@RequestMapping(value = "register", consumes="application/json", method = RequestMethod.POST)
public Map<String,Object> register(@RequestBody Map<String,Object> map){
System.out.println("register");
System.out.println(map.get("name").toString());
System.out.println(map.get("pwd").toString());
Map.get ("name") gets the name value from the front end
String name = (String)map.get("name");
String pwd = (String)map.get("pwd");
Map<String,Object> resultMap = new HashMap<>();
resultMap.put("status".true);
returnresultMap; }}Copy the code2. Write add, delete, modify and check interface (currently only write add and query interface)
1) Add user interfaces
@Autowired
private UserMapper userMapper;// The class that operates on the database
/** * Add user interface *@param map
* @return* /
@RequestMapping(value = "add", consumes="application/json", method = RequestMethod.POST)
public Map<String,Object> add(@RequestBody Map<String,Object> map){
// Print the data from the preview front end
System.out.println(map.get("name").toString());
System.out.println(map.get("age").toString());
System.out.println(map.get("pwd").toString());
System.out.println(map.get("email").toString());
System.out.println(map.get("remark").toString());
/ / steps
//1. Obtain the front-end incoming user
Map.get ("name") gets the name value from the front end
String name = (String)map.get("name");
String age = (String)map.get("age");
String pwd = (String)map.get("pwd");
String email = (String)map.get("email");
String remark = (String)map.get("remark");
//2 Define a user class to hold data from the front end
User user = new User();
user.setId(UUID.randomUUID().toString().replaceAll("-".""));
user.setName(name);
user.setAge(age);
user.setPassword(pwd);
user.setEmail(email);
user.setRemark(remark);
//4. Define the result map, and return a message to the interface visitor whether the adding succeeded
Map<String,Object> resultMap = new HashMap<>();
try{
// insert into database,
//insert is to insert the database
//select the database ID
// Update: Changes the database ID + other
//delete is to delete the database ID
userMapper.insert(user);
// Add a return state to the result map, which returns true on successful insertion
resultMap.put("status".true);
}catch (Exception e){
// Return false on successful database insertion
resultMap.put("status".false);
e.printStackTrace();
}
return resultMap;
}
Copy the code2) Interface for querying users
// Query the interface
/** * Query user interface *@param map
* @return* /
@RequestMapping(value = "select", consumes="application/json", method = RequestMethod.POST)
public Map<String,Object> select(@RequestBody Map<String,Object> map){
// Print the data from the preview front end
System.out.println(map.get("id").toString());
/ / steps
//1. Obtain the id from the front-end
Map.get ("name") gets the name value from the front end
String id = (String)map.get("id");
//2 Define a user class to hold the id passed from the front end
User user = new User();
user.setId(id);
//4. Define the result map, and return a message to the interface visitor whether the adding succeeded
Map<String,Object> resultMap = new HashMap<>();
try{
//select the database ID
// Step 3: Check data by ID
// Define a list to hold the data returned by the database
List list = userMapper.select(user);
// Print the data found in the database
System.out.println(list.get(0).toString());
// Add a return state to the result map, which returns true on successful insertion
resultMap.put("status".true);
resultMap.put("user",list.get(0));
}catch (Exception e){
// Return false on successful database insertion
resultMap.put("status".false);
e.printStackTrace();
}
return resultMap;
}
Copy the code