SpringBoot+Vue从零开始做网站4-创建vue项目，并整合后台管理系统

后端项目搭建出底子了，数据持久化也做了，然后就是前端开发了，首先呢是要创建一个vue项目，然后先做后台管理系统再高前台博客。。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

node.js安装参考：https://www.zjhuiwan.cn/info/20220408/4408162514227884.html

vue环境搭建参考：https://www.zjhuiwan.cn/info/20190307/1903071058073480002.html

之前记得笔记还是有用的，不然指定网上遍地找呢，已经忘记怎么搭建vue的脚手架了，毕竟我是个后端开发呀哈哈。

跟着之前写的执行命令，创建好项目

然后运行

访问试一下，ok了

然后就是找个vue版本的后台管理系统模板了，今天就是做一个简单的列表功能

找了个vue3.0的后台管理系统，真的是有好多不会的啊

不过慢慢来吧，学起来~

然后就是开始根据自己的实际系统需求开造，首先测试一下前后端能否联通

先试一试列表页

                
                
              
              
                
                    
                        {{ scope.row.status }}
                    
                

                
                
                    
                        编辑
                        
                        删除
                    
                
            
            
                
            
        

       
    

1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

2、setup函数是 Composition API（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

结合ref使用

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property。

ref推荐对基础数据类型进行处理，引用的数据类型虽然也能形成响应式，但性能不够好。

基础数据类型

import { ref } from 'vue'
export default {
	setup() {
    	 const count = ref(0)
    	 const onClickAddCount = () => {
         	count.value += 1
         }
        return { count, onClickAddCount }
    }
}

引用数据类型

import { ref } from 'vue'
export default {
	setup() {
    	const obj = ref({
       		a: 0
    	})

    const onClickAddObj = () => {
      obj.value = {
        a: obj.value.a + 1
      }
    }
        return { obj , onClickAddObj }
    }
}

reactive

reactive 是 Vue3 中提供的实现响应式数据的方法。

在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的 Proxy来实现的。

reactive 参数必须是对象 (json / arr)

如果给 reactive 传递了其它对象

默认情况下，修改对象无法实现界面的数据绑定更新。

如果需要更新，需要进行重新赋值。(即不允许直接 *** 作数据，需要放个新的数据来替代原数据)

跨域问题

跨域是个老问题了，之前工作中就遇到不少次，前端后端都可以解决，为了方便，直接在后端解决下。

在Springboot启动类里加上如下代码，重启之后即可实现跨域访问，前端无需再配置跨域。

@SpringBootApplication
//添加扫描mybatis的dao层接口，生成实现类
@MapperScan(value = "com.zjlovelt.mapper")
public class LtBlogApplication extends WebMvcConfigurerAdapter {

    public static void main(String[] args) {
        SpringApplication.run(LtBlogApplication.class, args);
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

然后去列表刷新，完美。

一个简单的列表查询就好了，这也代表前后端通了

后面就就是先做后台管理系统了，根据自己博客的需求来做，文章管理、照片管理、心情管理、友链管理、留言管理等等等功能的后台开发。

在博客中查看：从零开始做网站4-创建vue项目，整合后台系统 - ZJBLOG