MybatisPlus+Vue 所遇到的分页、用户登录以及跨域问题

项目：

跨域：

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

分页配置：

@Configuration
public class PageConfiguration {
    @Bean
    public PaginationInterceptor paginationInterceptor(){
        return new PaginationInterceptor();
    }

}

import java.util.List;
@Data
public class PageNewsVo {
    private List<News> data;
    private Long total;
}

@RestController
@RequestMapping("/news")
public class NewsController {
    @Autowired
   private NewsMapper newsMapper;
    @Autowired
    private NewsService newsService;
    @GetMapping("/list/{page}/{size}")
    public PageNewsVo list(@PathVariable("page")Integer page,
                           @PathVariable("size")Integer size){
        Page<News> page1 = new Page<>(page, size);
        Page<News> result = newsMapper.selectPage(page1, null);
        List<News> records = result.getRecords();
        long total = result.getTotal();
        PageNewsVo pageNewsVo = new PageNewsVo();
        pageNewsVo.setData(records);
        pageNewsVo.setTotal(total);
        return pageNewsVo;
    }
    @GetMapping("/findById/{id}")
    public News findById(@PathVariable("id")Integer id){
        return newsService.getById(id);
    }
    @GetMapping("/listByType/{type}/{page}/{size}")
    public PageNewsVo listByType(@PathVariable("type") String type,
                                 @PathVariable("page") Integer page,
                                 @PathVariable("size") Integer size){
        Page<News> page1 = new Page<>(page, size);
        QueryWrapper<News> wrapper = new QueryWrapper<>();
        wrapper.eq("type", type); // 使用条件查询
        Page<News> result = newsMapper.selectPage(page1, wrapper);

        List<News> records = result.getRecords();
        long total = result.getTotal();

        PageNewsVo pageNewsVo = new PageNewsVo();
        pageNewsVo.setData(records);
        pageNewsVo.setTotal(total);

        return pageNewsVo;
    }
    @PostMapping("/add")
    public boolean add(@RequestBody News news){
        return this.newsService.save(news);
    }

    @PostMapping("/update")
    public boolean update(@RequestBody News news){
        return this.newsService.updateById(news);
    }
    @DeleteMapping("/deleteById/{id}")
    public boolean delete(@PathVariable("id")Integer id){
        return this.newsService.removeById(id);
    }

}

前端：

<template>
<div>
  <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
         style="width: 100%" class="custom-table">
    <el-table-column
        label="日期"
        prop="time">
    </el-table-column>
    <el-table-column
        label="标题"
        prop="title">
    </el-table-column>
    <el-table-column
        label="类型"
        prop="type">
    </el-table-column>
    <el-table-column
        label="作者"
        prop="user">
    </el-table-column>


    <el-table-column
        align="right">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)">查看</el-button>
      </template>

    </el-table-column>
  </el-table>
  <el-pagination layout="prev,pager,next"
                 :page-size="pageSize"
                 :total="total"
                 :current-page.sync="currentPage"
                 @current-change="page">

  </el-pagination>



</div>
</template>

<script>
export default {
  name: "NewsContent",
  data() {
    return {
      tableData: [

      ],
      pageSize:5,
      total:null,
      currentPage:1,
      search: ''
    }
  },created() {
    let _this = this;
    axios.get('http://localhost:8888/news/list/1/'+this.pageSize).then(function (resp){
      console.log(resp.data)
      _this.tableData = resp.data.data
      _this.total = resp.data.total
    })
  },
  methods: {
    handleEdit( row) {
      console.log(row);
      this.$router.push("/newsDetail?id="+row.id)
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    page(currentPage){
      const _this = this
      axios.get("http://localhost:8888/news/list/"+currentPage+"/"+this.pageSize).then(function (resp){
        _this.tableData = resp.data.data
        _this.total = resp.data.total
      })
    },
    rowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
    },
  },

}

</script>

<style scoped>
.custom-table /deep/ .el-table__body-wrapper tbody tr:nth-child(even) {
  background-color: #B3C0D1 !important;
}

.custom-table /deep/ .el-table__body-wrapper tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}
</style>

登陆:

<template>
  <div class="login" clearfix>
    <div class="login-wrap">
  <div style="width: 450px;height: 350px;margin-top: 200px;margin-left: 400px;background-color: rgb(107,149,224,0.5);
border-radius: 10px" >
    <div style="width: 100%;height: 100px;font-size: 30px;line-height: 100%;
text-align: center;color: blue;margin-top: 50px">欢迎登录！</div>

    <div style="margin-top: 25px;text-align: center;height: 320px">
      <el-form ref="form" :model="form" label-width="60px"  class="login-box">
        <el-form-item label="用户名" class="bold-label">
          <el-input v-model="form.username" style="width: 80%" placeholder="请输入用户名" ></el-input>
        </el-form-item>
        <el-form-item label="密码" class="bold-label">
          <el-input v-model="form.password" style="width: 80%" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">登陆</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <div style="text-align: right;font-size: small;height: 3px;color: rosybrown" @click="admin()" class="blinking-text">>点击跳转管理员</div>
      <br>
      <div style="text-align: right;font-size: small;height: 3px;color: rosybrown" @click="register()" class="blinking-text">
        <span>>点击注册</span>
        </div>
    </div>
  </div>
  </div>
  </div>

</template>

<script>
export default {
  name: "LoginVue",
  data(){
    return{
      form:{
        username:'',
        password:''
      }
    }
  },
  methods:{
    onSubmit(){
      let _this = this

      axios.post("http://localhost:8888/users/login",_this.form).then(function (resp){
        console.log(resp)
        if(resp.data === true){
          localStorage.setItem('access-admin',JSON.stringify(_this.form))
          console.log(localStorage.getItem('access-admin'))
          _this.$router.push("/home?id="+_this.form.username)
        }
        else {
          _this.$router.push("/LoginFalse")
        }
      })
    },
    register(){
      this.$router.push("/loginRegister")
    },
    admin(){
      this.$router.push("/adminLogin")
    }
  }

}
</script>

<style >
.login {
  width: 100%;
  height: 740px;
  background: url("../assets/images/img.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.bold-label{
  font-weight: bold;

}
.blinking-text {
  text-align: right;
  font-size: small;
  height: 3px;
  color: rosybrown;
  animation: blink 1s infinite; /* 1s 是动画周期，可以根据需要调整 */
}

@keyframes blink {
  50% {
    opacity: 0; /* 50% 的透明度，实现闪烁效果 */
  }
}
</style>

取出:

<template>
  <div >
    <div class="home">

    <el-container class="home_container" style="background-color: #42b983">
      <el-header>
        <div class="home_title">校园新闻网
        <div style="text-align: right;font-size: small;color: royalblue" @click="exit()">点击退出</div>
        </div>
      </el-header>
    </el-container>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']" router>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>信息</template>
            <el-menu-item-group>
              <template slot="title">操作</template>
              <el-menu-item :index="'/personal?id=' + this.name">个人信息修改</el-menu-item>
              <el-menu-item index="/otherinfo">其他信息</el-menu-item>

            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-news"></i>新闻信息</template>
            <el-menu-item-group>
              <template slot="title">查看新闻</template>
              <el-menu-item index="/newsContent">全部新闻</el-menu-item>
              <el-menu-item @click="navigateToNewsTypeSelect('日常')">日常</el-menu-item>
              <el-menu-item @click="navigateToNewsTypeSelect('围炉夜话')">围炉夜话</el-menu-item>
              <el-menu-item @click="navigateToNewsTypeSelect('学习')">学习</el-menu-item>
              <el-menu-item @click="navigateToNewsTypeSelect('询问')">询问</el-menu-item>
              <el-menu-item @click="navigateToNewsTypeSelect('匿名')">其他</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="">
              <el-menu-item :index="'/newsPublish?id='+this.name">发布新闻</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-s-promotion"></i>友情导航</template>
            <el-menu-item-group>
              <template slot="title">友情导航</template>
              <el-menu-item index="3-1" @click="gotoHubu()">湖北大学官网</el-menu-item>
              <el-menu-item index="3-2" @click="gotoService()">智慧服务中心</el-menu-item>
            </el-menu-item-group>


          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px;background-color: #B3C0D1;color: #333;
        line-height: 60px;" >
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item @click="exit()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span >{{ name }}</span>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
  </div>
</template>


<style>
.el-aside {
  color: #333;
}
.home {
  width: 100%;
  height: 740px;
  background: url("../assets/images/img4.jpg") no-repeat;
  background-size: 100% 100%;

  overflow: hidden;
}
</style>





<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  created() {
    this.$nextTick(() => {
      if (localStorage.getItem('access-admin')) {
        let accessAdminData = JSON.parse(localStorage.getItem('access-admin'));
        this.name = accessAdminData.username;
        this.nameSet = true;
        console.log('Setting this.name:', this.name);
      }
      console.log(this.name);
    });
  },



  data() {

    return {
      tableData:'',
      name:'',
      nameSet: false,
    }
  },

  methods:{
    gotoHubu(){
        window.location.href="https://www.hubu.edu.cn/"
    },
    gotoService(){
      window.location.href="https://sso.hubu.edu.cn/"
    },
    test(){
      this.$router.push({ path: '/test' })
    },
    navigateToNewsTypeSelect(id){
      // 获取当前路径

      this.$router.push("/newsTypeSelect?id="+id);
      this.$router.go(0);

    },
    exit(){
      localStorage.removeItem("access-admin")
      this.$router.push("/")
    }
  }
}
</script>

created() {
    this.$nextTick(() => {
      if (localStorage.getItem('access-admin')) {
        let accessAdminData = JSON.parse(localStorage.getItem('access-admin'));
        this.name = accessAdminData.username;
        this.nameSet = true;
        console.log('Setting this.name:', this.name);
      }
      console.log(this.name);
    });
  },







exit(){
      localStorage.removeItem("access-admin")
      this.$router.push("/")
    }