承接上章
其实vue是比较简单比较好上手的前端语言，毕竟都是封装的方法，各种引入就行，我不求多好看，只求可以跑就行了。
1.搭建好vue环境，在控制台执行npm run dev 可以生成一句话
Your application is running here: http://localhost:8080
整体的结构如下
2.其实只要知道路由就行了，在里面可以配置各个页面的跳转，就是index.js的编写
import Vue from 'vue'
import Router from 'vue-router'
import helloworld from '@/helloworld'
import index from '@/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/helloword',
name: 'helloword',
component: helloworld
},
{
path: '/index',
name: 'index',
component: index
}
]
})
配置了两个页面，第一个是登录注册页面第二个是首页。
3.页面编写首先写登陆注册页面
<template>
<div class="hello">
<h1>首页</h1>
<input type="input" id="name" @change="changeName" v-model="name"><br/>
<div class="block"></div>
<input type="input" id="password" @change="changePassword" v-model="password"><br/>
<div class="block" broder="1"></div>
<button class="disenabled" v-if="disenabled" v-on:click="regist" :disabled="disenabled">注册</button>
<button class="enabled" v-if="!disenabled" v-on:click="regist" :disabled="disenabled">注册</button>
<button class="disenabled" v-if="disenabled" v-on:click="login" :disabled="disenabled">登录</button>
<button class="enabled" v-if="!disenabled" v-on:click="login" :disabled="disenabled">登录</button>
</div>
</template>
<script>
//用于处理post请求
import axios from 'axios'
export default {
name: 'App',
data() {
return {
name: '',
password: '',
disenabled: true,
nextStep: false,
data: ''
}
},
methods: {
//发送post的公共方法
post(url, params, name, functionName) {
axios.post(url, params).then(resp => {
this.data = resp.data
if (this.data.retCode == "1") {
functionName()
} else {
alert(2 + resp.data.retMsg);
}
}).catch(err => {
console.log('请求失败：' + err.status + ',' + err.statusText);
});
},
//注册方法
regist() {
this.post('http://192.168.102.xx:8090/nans/user/create', {
userName: this.name, password: this.password,
phone: 15000000000, userId: Math.round(Math.random() * 1000)
}, "注册成功")
},
//登陆方法，顺便去下个页面
login() {
this.post('http://192.168.102.xx:8090/nans/user/login', {
userName: this.name,
password: this.password
}, "登录成功", this.goToNextPage)
},
//去下个页面的方法
goToNextPage() {
if (this.data.retCode == "1") {
this.$router.push("/index")
}
},
changeName() {
if (this.name == "") {
alert("姓名不能为空")
}
this.changeButton()
},
changePassword() {
if (this.password == "") {
alert("密码不能为空")
}
this.changeButton()
},
changeButton() {
if (this.name == "" || this.password == "") {
this.disenabled = true
} else {
this.disenabled = false
}
}
}
}
</script>
<style scoped>
#button {
width: 100px;
}
.block {
height: 20px;
width: 100px;
}
.disenabled {
color: black;
background-color: grey;
}
.enabled {
color: white;
background-color: blue;
}
</style>
输入姓名密码，失焦后点击注册，F12看返回显示插入成功，然后去数据库看下，生产了数据
然后用编号和密码登录，这里的编号就是我前端生产的唯一编号可以用uuid，也可以用随机的几位数，点击登录，就可以请求成功，去另一个页面了。
<template>
<div class="index">
<h1>首页</h1>
</div>
</template>
<script>
import axios from 'axios'
export default{
name: 'App',
data(){
return{
name:'',
password:'',
disenabled:true,
nextStep:false,
data:''
}
},
methods: {}}
</script>
<style scoped>
#button{
width: 100px;
}
.block{
height:20px;
width: 100px;
}
.disenabled{
color:black;
background-color: grey;
}
.enabled{
color:white;
background-color: blue;
}
</style>
至于登陆注册的java方法就是增和查询，其他的一些简短的判断，数据库的密码我当然也加密了哈。
其实我vue比较菜，只会写基础主要配合页面跳转。
总结：在发post请求可能会遇见跨域的问题，需要在java代码里解决。写一个公共的config即可
package com.example.demo.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
.maxAge(3600);
}
}
附上业务代码吧
package com.example.demo.controller;
import com.alibaba.fastjson.JSONObject;
import com.example.demo.enetity.ResponseBean;
import com.example.demo.service.UserService;
import com.example.demo.util.ErrorEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@CrossOrigin
@RestController
@RequestMapping("/nans")
public class UserController {
@Autowired
UserService userService;
@PostMapping("/user/create")
public ResponseBean createUser(HttpServletRequest request, @RequestBody JSONObject jsonObject){
String userId = jsonObject.getString("userId");
String userName = jsonObject.getString("userName");
String password = jsonObject.getString("password");
String phone = jsonObject.getString("phone");
if(null!=userId&&null!=userName&&null!=password&&null!=phone) {
return userService.createUser(userId, userName, password, phone);
}else{
return new ResponseBean(ErrorEnum.E_1002);
}
}
@PostMapping("/user/login")
public ResponseBean loginUser(HttpServletRequest request, @RequestBody JSONObject jsonObject){
String userName = jsonObject.getString("userName");
String password = jsonObject.getString("password");
if(null!=userName&&null!=password) {
return userService.loginUser(userName, password);
}else{
return new ResponseBean(ErrorEnum.E_1002);
}
}
}
实现类
package com.example.demo.service.impl;
import com.alibaba.fastjson.JSONObject;
import com.example.demo.dao.NsUserMapper;
import com.example.demo.enetity.NsUser;
import com.example.demo.enetity.ResponseBean;
import com.example.demo.service.UserService;
import com.example.demo.util.EncryUtils;
import com.example.demo.util.ErrorEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import java.util.Date;
@Service
public class UserServiceImpl implements UserService {
@Autowired
NsUserMapper nsUserMapper;
@Value("stringPath.value")
private String stringPath;
@Override
public ResponseBean createUser(String userId,String userName,String password,String phone) {
NsUser nsUser = new NsUser();
Date date = new Date();
nsUser.setUpdateUser(userId);
nsUser.setUserId(userId);
nsUser.setUpdateTime(date);
nsUser.setUsername(userName);
nsUser.setPhone(phone);
//加密方法
String encodePsd = EncryUtils.encode(password);
nsUser.setPsd(encodePsd);
NsUser nsUser1 = nsUserMapper.selectByPrimaryKey(userId);
//有则更新无则新增
if (null!=nsUser1){
nsUserMapper.updateByPrimaryKey(nsUser);
}else{
nsUser.setCreateTime(date);
nsUser.setCreateUser(userId);
nsUserMapper.insert(nsUser);
}
ResponseBean jsonObject = new ResponseBean("1","插入成功",new JSONObject());
return jsonObject;
}
@Override
public ResponseBean loginUser(String userName, String password) {
NsUser nsUser=null;
if(userName!=null&& userName.length()<=6){
nsUser = nsUserMapper.selectByPrimaryKey(userName);
}else if(userName!=null&& userName.length()==11){
nsUser = nsUserMapper.selectByPhone(userName);
}else{
return new ResponseBean(ErrorEnum.E_1003);
}
if(nsUser==null){
return new ResponseBean(ErrorEnum.E_1003);
}else{
加密方法
String passwordAes = EncryUtils.encode(password);
if(passwordAes.equals(nsUser.getPsd())) {
ResponseBean jsonObject = new ResponseBean("1", "登录成功", new JSONObject());
return jsonObject;
}else{
return new ResponseBean(ErrorEnum.E_1004);
}
}
}
}
这里做完了已经实现前后端联通，下一步就是具体模块的开发和一些redis，mongdb，加密方法。还可以自己手写一个发送和返回报文的形式，总之开放性就很高了，大家加油啊。
扫一扫
2277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
