目录
1.前端部分
1.1 项目结构
1.2 页面
1.2.1 index.vue
<template>
<div>
<center>
<input type="button" @click="insert()" value="增加">
<input type="button" @click="logout()" value="退出">
<table border="1" >
<tr>
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生地址</th>
<th>操作</th>
</tr>
<tr v-for="(stu,index) in studenlist">
<td>{{index+1}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.sex==1?'男':'女'}}</td>
<td>{{stu.address}}</td>
<td>
<input type="button" @click="update(stu.id)" value="修改">
<input type="button" @click="del(stu.id)" value="删除">
</td>
</tr>
</table>
</center>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
studenlist:[]
}
},
methods:{
findAll:function () {
axios.get("api/findAll").then(res=>{
if (res.data=="noper"){
alert("没权限!!!!")
this.$router.push("/")
}
this.studenlist = res.data;
})
},
update:function (name) {
this.$router.push({name:"update",params:{id:name}})
},
insert:function () {
this.$router.push("/update")
},
del:function (id) {
axios.post("/api/del",{id:id}).then(res=>{
this.findAll();
})
}
,
logout:function () {
axios.get("/api/logout").then(res=>{
if (res.data=="success"){
this.$router.push("/")
}
})
}
},
mounted(){
this.findAll();
}
}
</script>
1.2.2 update.vue
<template>
<div>
<form>
<input v-model="stu.id" type="hidden">
姓名:<input v-model="stu.name" type="text"><br>
年龄:<input v-model="stu.age" type="text"><br>
性别:<input v-model="stu.sex" type="text"><br>
地址:<input v-model="stu.address" type="text"><br>
<input type="button" @click="sub()" value="提交">
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
stu:{}
}
},
methods:{
findById:function (id) {
//使用id去后台进行查询
axios.post("/api/findById",{id:id}).then(res=>{
console.log(res.data)
this.stu=res.data;
})
},
sub:function () {
axios.post("/api/saveAndUpdate",this.stu).then(res=>{
if (res.data=="success"){
this.$router.push("/index")
}
if (res.data=="noper"){
alert("没权限!!!")
}
})
}
},
mounted(){
var id = this.$route.params.id
if (id!=undefined){
this.findById(id)
}
}
}
</script>
1.2.3 login.vue
<template>
<div>
用户名: <input type="text" v-model="user.loginName" name="loginName"><br>
密码: <input type="password" v-model="user.password" name="password"><br>
<input type="button" @click="login" value="登录">
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "",
data(){
return{
user:{}
}
},
methods:{
login:function() {
axios.post("/api/login",this.user).then(res=>{
if (res.data=="success"){
this.$router.push("/index")
}else{
alert("登录失败")
}
})
}
}
}
</script>
1.2.4 index.jsp配置
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import update from '@/components/update'
import login from '@/components/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: login
},{
path: '/update',
name: 'update',
component: update
},{
path: '/index',
name: 'index',
component: index
}
]
})
1.3 配置axios
页面中需要导入:import axios from ‘axios’;
在命令行输入:npm install axios
1.4 处理跨域请求的2种方式
1.后端controller中处理
//在controller中,加入注解
@CrossOrigin//允许跨域请求
2.前端中处理
使用:post请求
get请求:
2.后端部分
2.1 项目结构
2.2 重要代码
点击查看
和前几天后台相同,只需要将controller中的返回值改为”success“或”fail“,不用再跳转页面
前后端端口号不能相同,所以我将后端改为8088
controller代码:
@RestController
public class StudentController {
@Autowired
StudentService studentService;
@RequiresPermissions(value = {"user_findAll"})
@RequestMapping("/findAll")
public List<TbStudent> findAll(){
return studentService.findAll();
}
@RequiresPermissions(value = {"user_update"})
@RequestMapping("/saveAndUpdate")
public String saveAndUpdate(@RequestBody TbStudent tbStudent){
try {
studentService.saveAndUpdateStudent(tbStudent);
}catch (Exception ex){
return "fail";
}
return "success";
}
@RequiresPermissions(value = {"user_update"})
@RequestMapping("/findById")
public TbStudent findById(@RequestBody Map map){
Integer id = (Integer) map.get("id");
return studentService.findById(id);
}
@RequiresPermissions(value = {"user_delete"})
@RequestMapping("/del")
public String del(@RequestBody Map map){
Integer id = (Integer) map.get("id");
studentService.deleteById(Integer.valueOf(id));
return "success";
}
@RequestMapping("/login")
public String login(@RequestBody Map map){
String loginName = (String)map.get("loginName");
String password = (String)map.get("password");
Subject subject = SecurityUtils.getSubject();
UsernamePasswordToken token = new UsernamePasswordToken(loginName, password);
try {
subject.login(token);
}catch (IncorrectCredentialsException ini){
System.out.println(ini.getMessage());
}
if (subject.isAuthenticated()){
return "success";
}else{
return "fail";
}
}
@RequestMapping("/logout")
public String logout(){
Subject subject = SecurityUtils.getSubject();
subject.logout();
return "success";
}
}