项目part1

面向对象程序设计大作业

NodeJS安装

Vue，是一款用于构建用户界面的渐进式的JavaScript(1)框架,通过使用vue官方提供的脚手架create-vue帮我们完成前端的工程化,而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS
(1)HTML负责网页的结构，CSS负责网页的表现,JavaScript让网页具备一定的交互效果，具有一定的动作行为

1. 双击安装包

2. 选择安装目录

安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

3. 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

4. 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "D:\develop\NodeJS"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

5. 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com

6. 安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

npm：Node Package Manager，是NodeJS的软件包管理器。
在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。

Vue项目创建

项目创建

命令行形式

创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4

图形化界面方式

首先，在桌面创建vue文件夹，双击进入文件夹，地址目录处输入cmd，然后进入到vue文件夹的cmd窗口界面，直接输入命令vue ui进入到vue的图形化界面，选择创建按钮，在vue文件夹下创建项目，然后预设模板选择手动，在功能页面开启路由功能，然后再配置页面选择语言版本和语法检查规范，不保存预设，然后创建项目。最后我们只需要等待片刻，即可进入到创建创建成功的界面。

注：Vue的组件有两种不同的风格：组合式API和选项式API。Vue3提供了组合式API(没有this对象的，this对象是undefined )
执行上述指令之一，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

项目结构

启动项目

点击NPM脚本中的dev后的运行按钮

项目流程

其中*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（*.vue）

利用ElementPlus辅助开发

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等。
官方网站

使用

在当前工程的目录下，执行如下命令

npm install element-plus@2.4.4 --save

npm install pinia  //这样才能使用图标

main.js中代码修改为

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus, {locale: zhCn})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

常用到的组件有表格组件，分页条组件，对话框组件，表单组件等

VueRouter

• Vue Router：Vue的官方路由。 为Vue提供富有表现力、可配置的、方便的路由。
• Vue中的路由，主要定义的是路径与组件之间的对应关系。

比如，我们打开一个网站，点击左侧菜单，地址栏的地址发生变化。 地址栏地址一旦发生变化，在主区域显示对应的页面组件。
VueRouter主要由以下三个部分组成，如下所示：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

安装VueRouter

npm install vue-router@4（Vue 3）或 npm install vue-router@3（Vue 2）

快速上手：

1. App.vue中修改部分代码为

   <script setup>
   </script>
   <template>
     <router-view></router-view>
   </template>

2. 创建router文件夹，里面创建index.js这一文件。注意要嵌套路由
3. 在 views/layout/index.vue 中，调整代码，具体调整位置如下：

   在左侧菜单栏的 <el-menu> 标签上添加 router 属性，这会让 Element Plus 的 <el-menu> 组件自动根据路由来激活对应的菜单项。
   使用 <router-view> 组件来渲染根据路由动态变化的内容。
   确保每个 <el-menu-item> 的 index 属性值与你想要导航到的路径相匹配。

   4.安装axios
   Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

• 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。
• 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
  使用原生的Ajax请求的代码编写起来比较繁琐，所以使用更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写
  安装：

  npm install axios

  5.结构优化
  在前端项目开发时，通常会定义一个请求处理的工具类 - src/utils/request.js。在这个工具类中，对axios进行了封装

  import axios from 'axios'
  import { ElMessage } from 'element-plus'
  import router from '../router'
  
  //创建axios实例对象
  const request = axios.create({
    baseURL: '/api',
    timeout: 600000
  })
  
  //axios的请求 request 拦截器, 每次请求获取localStorage中的loginUser, 从中获取到token, 在请求头token中携带到服务端
  request.interceptors.request.use(
    (config) => {
      let loginUser = JSON.parse(localStorage.getItem('loginUser'))
      console.log(localStorage.getItem('loginUser'))
      if (loginUser) {
        config.headers.token = loginUser.token
      }
      return config
    }
  )
  
  //axios的响应 response 拦截器
  request.interceptors.response.use(
    (response) => { //成功回调
      return response.data
    },
    (error) => { //失败回调
      //如果响应的状态码为401, 则路由到登录页面
      if (error.response.status === 401) {
        ElMessage.error('登录失效, 请重新登录')
        router.push('/login')
      }else{
        ElMessage.success('接口访问异常')
      }
      return Promise.reject(error)
    }
  )

  而与服务端进行异步交互的逻辑，通常会按模块，封装在一个单独的API中。

后端项目启动
前置基础：Maven、HTTP协议、SpringBootWeb基础、IOC、DI（依赖控制，注入反转）、MySQL、JDBC、Mybatis等
后端开发人员：必须严格遵守提供的接口文档进行后端功能开发（保障开发的功能可以和前端对接）
而在前后端进行交互的时候，我们需要基于当前主流的REST风格的API接口进行交互。
在REST风格的URL中，通过四种请求方式，来操作数据的增删改查。

• GET ： 查询
• POST ：新增
• PUT ： 修改
• DELETE ：删除
  浏览器中所发起的所有的请求，都是GET方式的请求。
  前后端都在并行开发时，可以借助一些接口测试工具，比如：Postman，后端开发完对应的接口之后，对接口进行请求测试；前端开发过程中，获取到数据，测试页面的渲染展示。
  
  步骤：

1. 准备数据库表
2. 创建springboot工程，引入对应的起步依赖（web、mybatis、mysql驱动、lombok）
3. 配置文件application.properties中引入mybatis的配置信息，准备对应的实体类
4. 准备对应的Mapper、Service(接口、实现类)、Controller基础结构