前后端分离：vue+springboot+shiro权限控制

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";
    }

}