前端复习（01）

原创已于 2025-08-29 10:09:14 修改 · 895 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#java

于 2025-07-31 17:46:46 首次发布

SpringBoot 专栏收录该内容

5 篇文章

订阅专栏

课程设计

前端
- HTEML,CSS,JS
- Vue,Element,Nginx
后端
- Maven
- SpringBoot Web 基础篇
- MySQL
- SpingBoot Mybatis
- SpringBoot Web开发篇
- SpringBoot Web进阶篇

简单回顾Vue

什么是Vue？

基于MVVM（Model-View-viewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

// 第一步引入 Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

// 第三步定义视图
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</body>

<script>
// 第二步定义Vue对象
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
</html>

Vue常用指令

v-bind 为HTML标签绑定属性值，如设置 href，css —> 可以简写为 :
v-model 在表单元素上创建双向数据绑定
v-on 为HTML绑定事件
v-if,v-else-if,v-else 条件渲染某些元素
v-show 切换的是 display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

演示



<a v-bind:href="url">this is a link</a>
<a :href="url">this is a link</a>



<button v-on:click="changeMessage">Change Message</button>
<button @click="changeMessage">Change Message</button>


<div v-for="(item, index) in address" :key="index">{{index + 1}}:{{ item }}</div>
<div v-for="item in address" :key="index">{{ item }}</div>


<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      url : 'https://www.baidu.com',
      address: ['China', 'USA', 'Japan', 'Korea'],
    },
    methods: {
      changeMessage: function() {
        this.message = 'Hello World!';
      }
    },
    mounted() {
      console.log('mounted')
    },
  })

</script>

生命周期

brforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
- 在这个生命周期里向后端获取数据
beforeUpdate 更新前
updatedd 更新后
beforeDestroy 销毁前
destroyed 销毁后

ajax

基本介绍
- 全称Asynchronous JavaScript And XML ,异步的JavaScript 和XML
作用
- 数据交换：向服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新驾照整个页面的情况下，与服务器交换数据并更新部分网页的技术
现在使用的 Axios

快速入门


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
// 引入axios
const axios = require('axios');

// 发送GET请求
axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
      console.log(response.data);
    })
  .catch(error => {
      console.error('Error:', error);
    });


const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', data)
  .then(response => {
      console.log(response.data);
    })
  .catch(error => {
      console.error('Error:', error);
    });

space-dnwbb - Eolink Apikit

开发工作流程
- 需求分析
- 接口定义（API接口文档）
- 前后端并行开发
- 测试
- 前后端联合测试
YApi
- 添加项目
- 添加分类
- 添加接口

注：Eolink主要功能有API接口管理，Mock服务

前端工程化

模块化
组件化
规范化
- 目录结构
- 编码
- 接口
自动化
- 构建
- 部署
- 测试

环境准备（Vue-cli）

Vue-cli提供的功能
- 同一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJs

// 创建项目

vue create vue-project01
vue ui


// 运行项目

npm run serve


// 更改端口号
// 在vue的配置文件中添加一个这个

devServer:{
	port:7000
}

目录结构

node_modules 整个项目的依赖包
public 存放项目的静态文件
src 存放项目的源代码
- assets 静态资源
- components 可复用的组件
- router 路由配置
- views 视图逐渐
- App.vue 入口页面
- main.js 入口js文件
package.json 模块基本信息，项目开发所需模块，版本信息
vue.config.js 保存vue配置文件，如：代理，端口等配置

组件文件

构成部分
- template
- script
- style

Element

快速入门

npm install element-ui@2.15.3

//在main.js 中引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);

// Vue中使用Axios

npm install axios
import axios from 'axios';

Vue路由


// 类似于导航栏
<router-link to="/xxx">xxx</router-link>

// 这里是视图
<router-view></router-view>

router文件

将路由中出现的配置vue，都写在views中，该文件夹和compontens平级

//router 文件的写法如下

import Vue from "vue";
import VueRouter from "vue-router";

  
Vue.use(VueRouter);

const routes = [
  {
    path: "/about",
    name: "AboutTem",
    component: () => import("@/views/AboutTem.vue")
  },
  {
    path: "/person",
    name: "Person",
    component: () => import("@/views/PeopleList.vue")
  },
]


const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

  
export default router;

main文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
Vue.use(router)


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')