相关技术栈
1.Vue-cli3+elementUI
2.Spring Boot
前端相关准备工作:
1.登录的页面布局
<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="用户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" 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')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
复制代码
2.登录的js代码
<script>
export default {
// name: 'home',
data () {
return {
ruleForm: {
name:'',
pwd: ''
},
rules: {
name: [{ required: true, message :'请输入用户名',trigger: 'blur'}],
pwd: [{ required: true, message :'请输入密码',trigger: 'blur'}]
}
}
},
components: {
// HelloWorld
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//this的作用域范围不同
//this关键字的作用域问题引起的错误。。。
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的数据:比如json串:{status: false, token: ""},获取其中的status的值。就是用res.data.status来获取
var status = res.data.status
if(status === true){
that.$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>
复制代码
3.注册的页面布局
<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="用户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input type="password" v-model="ruleForm.pwd"></el-input>
</el-form-item>
<el-form-item label="确认密码" 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')">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
复制代码
由于只是简单实现功能,所以对布局没有进行样式上的美化。
<style scoped>
.button{
width: 100%;
margin-top: 20px;
}
</style>
复制代码
4.注册的js代码
<script>
export default {
// name: 'home',
data () {
return {
//第一步:先声明 第二步:在v-model绑定 第三步:this.ruleForm.pwd获取数据
ruleForm: {
name:'',
pwd: '',
repwd:''
},
rules: {
name: [ { required: true, message :'请输入用户名',trigger: 'blur'}],
pwd: [ { required: true, message :'请输入密码',trigger: 'blur'}],
repwd: [ { required: true, message :'请再次输入密码',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('密码相等')
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('两次密码不一致')
}
console.log('error submit');
return false
}
});
},
resetForm(formName){
this.$refs[formName].resetField();
}
}
}
</script>
复制代码
5.弄一个home页面,登录成功之后跳转到home页面
<template>
<div class="home">
<h1>你好</h1>
</div>
</template>
复制代码
后端相关准备工作
1.写登录和注册的接口
@RestController
//RequestMapping是提供外部访问的URL地址块
@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());
//定义name变量,保存前端传来的值,map.get("name")是获取前端的name值
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());
}
//判断
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;
}
//注册
@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());
//定义name变量,保存前端传来的值,map.get("name")是获取前端的name值
String name = (String)map.get("name");
String pwd = (String)map.get("pwd");
Map<String,Object> resultMap = new HashMap<>();
resultMap.put("status",true);
return resultMap;
}
}
复制代码
2.写增删改查的接口 (目前只写了增加和查询的接口)
1)增加用户接口
@Autowired
private UserMapper userMapper;//操作数据库的类
/**
* 增加用户接口
* @param map
* @return
*/
@RequestMapping(value = "add", consumes="application/json", method = RequestMethod.POST)
public Map<String,Object> add(@RequestBody Map<String,Object> map){
//打印预览前端传来的数据
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());
//步骤
//1.获取前端传入用户
//定义name变量,保存前端传来的值,map.get("name")是获取前端的name值
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定义一个用户类保存前端传来的数据
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.定义结果map,给接口访问者返回添加是否成功信息信息
Map<String,Object> resultMap = new HashMap<>();
try{
//3插入数据库,
//insert是插入数据库
//select是查询数据库 id
//update是修改数据库 id + other
//delete是删除数据库 id
userMapper.insert(user);
//给结果map添加一个返回状态,插入数据库成功时候返回true
resultMap.put("status",true);
}catch (Exception e){
//插入数据库成功时候返回false
resultMap.put("status",false);
e.printStackTrace();
}
return resultMap;
}
复制代码
2)查询用户的接口
//查询接口
/**
* 查詢用户接口
* @param map
* @return
*/
@RequestMapping(value = "select", consumes="application/json", method = RequestMethod.POST)
public Map<String,Object> select(@RequestBody Map<String,Object> map){
//打印预览前端传来的数据
System.out.println(map.get("id").toString());
//步骤
//1.获取前端传入的id
//定义name变量,保存前端传来的值,map.get("name")是获取前端的name值
String id = (String)map.get("id");
//2定义一个用户类保存前端传来的id
User user = new User();
user.setId(id);
//4.定义结果map,给接口访问者返回添加是否成功信息信息
Map<String,Object> resultMap = new HashMap<>();
try{
//select是查询数据库 id
//步骤3:根据id查出数据
//定义一个列表保存数据库返回的数据
List list = userMapper.select(user);
//打印查看数据库查出来的数据
System.out.println(list.get(0).toString());
//给结果map添加一个返回状态,插入数据库成功时候返回true
resultMap.put("status",true);
resultMap.put("user",list.get(0));
}catch (Exception e){
//插入数据库成功时候返回false
resultMap.put("status",false);
e.printStackTrace();
}
return resultMap;
}
复制代码