创建一个基于vue3-nodejs实现的前后端分离项目。
Newsystem为vue3搭建的后台管理系统
server为后端服务

如果端口已经使用,如何关闭一个端口？
1.   打开cmd;权限不够用管理员打开
2.   netstat -ano |findstr 端口号
3.   taskkill /pid 端口号进程号 /f

12/3
搭建完后台管理系统的基本框架。
1.先对需要的路由进行定义,再去定义相对应的路由组件使之匹配。
2.利用element plus ui框架进行整体结构搭建。
3.创建了后端服务器,利用nodejs搭建。
4.利用反向代理,使nodejs和vue3通信,解决跨域问题(在3000端口和5717端口)

12/4
初步后端框架
1.对登录操作进一步完善。完善login接口,账户存入数据库
2.对已存在数据库中账号返回的数据进行加密处理,就是生成token,利用jwt技术(jsonwebtoken),存储浏览器中(localStorage)
客户端登陆成功 -> 发送数据到服务端,利用jwt技术生成token,储存在浏览器端;设置响应头返回给客户端存储,下次登录携带token -> 拦截器作用,请求数据前携带token
3.对前端请求数据,利用axios技术,封装拦截器;
4.cookie、session与token区别

12/11
个人用户页面完成
1.后台系统中,完善center界面,包括个人信息展示和个人信息更新
2.后台服务端,完善对应center界面的路由接口upload,更新用户信息操作,保存至数据库
3.导入multer模块来处理发送的文件请求

12/12
问题：
vue3组件间通信?
引入defineprops,子组件prop接收

12/25   总结
基于node.js+vue3+element plus的前后端新闻管理项目。大约两个星期左右完成。
包括前端页面webpage、后台管理系统Newsystem和后端接口server

后台管理系统Newsystem
创建router文件夹配置页面需要路由 -> 创建views文件夹配置路由对应的路由组件 -> main.js中引入添加的某些模块
1.配置路由router -> index.js 子路由动态创建subroute.js
2.vue状态管理工具store -> index.js 利用vuex,完成组件间的统一状态管理(组件间通信)
3.util文件夹为处理工具统一配置,需要时直接引入调用。
    axios-config.js -> 引入axios(基于Promise的网络请求库),请求和响应拦截器配置
    handleDate.js -> 引入moment库,处理时间格式
4.views文件夹为路由组件库；components文件夹为一般组件库
实现功能：
    Login.vue登录组件
    Mainbox.vue初始页面组件 -> 页面总体布局
    NotFound.vue未找到页面路由组件
    center文件夹 -> 个人中心
    home文件夹 -> 系统首页
    user-manage文件夹 -> 用户管理 用户添加和用户列表(编辑和删除)
    news-manage文件夹 -> 新闻管理 新闻添加和新闻列表(编辑和删除和发布)
    product-manage文件夹 -> 产品管理 产品添加和产品列表(编辑和删除)
利用element plus中的组件实现页面布局和功能实现,利用axios向server请求数据,渲染对应页面。
表单数据验证,删除和编辑。
5.component组件库中editor.vue组件利用wangeditor富文本编辑器,来实现对news-manage中新闻添加功能的实现。
6.使用router和vuex中的工具需要引入import {useRouter,useStore} from 'vue'中,来实现路由操作和对vuex中数据操作

后端接口server
1.routes中创建admin文件夹和web文件夹,来处理后台管理系统请求和前端页面请求
2.controller为处理请求的方法,响应请求数据
3.service为数据库操作,对发出的请求在数据库中操作,把数据返回给controller中
4.db文件夹为mongodb数据库连接和集合创建,对连接成功的数据库文件引入bin中www文件,require('db');
5.处理带有文件或图片的请求需要引入：
    //导入模块,处理有图片的请求
    const multer = require("multer");
    const upload = multer({ dest: "public/newsCover/" });
    //请求中添加
    upload.single("file");
利用axios发送请求需要加入：
    对头像：URL.createObjectURL(file.raw);
    const params = new FormData();
      for (var i in userForm) {
        params.append(i, userForm[i]);
      }
    headers: {
        "Content-Type": "multipart/form-data",
    };
6.util文件夹工具文件,JWT.js来处理登录,引入jsonwebtoken;添加token值

前端页面webpage
1.配置路由router
2.创建view,组件对应路由
3.component文件夹一般组件,对webpage整体布局。