淘先锋技术网

首页 1 2 3 4 5 6 7

【JavaWeb】前端框架（Vue+Ajax+工程）

一、Vue

在这里插入图片描述

1.什么是Vue?

  • Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
  • 基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

在这里插入图片描述

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

2.Vue快速入门

  1. 新建HTML页面，引入Vue.js文件
  1. 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
	new Vue({
		el: "#app",
		data: {
			message: "Hello vue !"
		}
	})
</script>
  1. 编写视图
<div id="app">
<input type="text" v-model="message">
{{ message }}
</div>

插值表达式：

  • 形式：{{表达式}}。
  • 内容可以是：
    • 变量
    • 三元运算符
    • 函数调用
    • 算术运算

3.常用指令

  • 指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如：v-if , v-for…
  • 常用指令
    在这里插入图片描述

（1）v-bind和v-model

  • v-bind
  • v-model
<script>
	new Vue({
		el: "#app",
		data:{
			url: "https://www.baidu.com"
		}
	})
</script>

注意事项：
通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

（2）v-on

<script>
	new Vue({
		el: "#app",
		data: {
			//...
		},
		methods:{
				handle:function(){
				alert('我被点击了');
			}
		},
	})
</script>

（3）v-if和v-show

  • v-if
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
  • v-show
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>

（4）v-for

data:{
	. . .
	addrs :['北京','上海','广州','深圳','成都','杭州']
},

4.Vue生命周期

  • 生命周期：指一个对象从创建到销毁的整个过程。
  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。
    在这里插入图片描述

在这里插入图片描述

<script>
	new vue({
		el: "#app" 
		data: {
		
		},
		mounted() {
			console.log( "Vue挂载完毕,发送请求获取数据");
		},
		methods: {
		
		},
	})
</script>
  • mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。(发送请求到服务端，加载数据)

二、Ajax

  • 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。
  • 作用：
    • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如∶搜索联想、用户名是否可用的校验等等。

在这里插入图片描述

1.同步与异步

在这里插入图片描述

2.原生Ajax（繁琐，过时）

  1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
  2. 创建XMLHttpRequest对象：用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据
<body>
	<input type="button" value="获取数据" onclick="getData()"><div id="div1"></div>
</body>
<script>
	function getData(){
		//1.创建XMLHttpRequest
		var xmlHttpRequest = new XMLHttpRequest();

		//2.发送异步请求
		xmlHttpRequest.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');
		xmlHttpRequest.send();//发送请求
		
		//3.获取服务响应数据
		xmlHttpRequest.onreadystatechange = function(){
			if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
				document.getElementByld('div1').innerHTML = xmlHttpRequest.responseText;
			}
		}
	}
</script>

在这里插入图片描述

3.Axios

在这里插入图片描述
  1. 引入Axios的js文件
  1. 使用Axios发送请求，并获取响应结果
axios({
	method: "get",
	url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result)=> {//成功回调函数
	console.log(result.data);
});

axios({
	method:"post",
	url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld",
	data:"id=1"
}).then((result)=>{//成功回调函数
	console.log(result.data);
});
  1. 请求方式别名（推荐）
axios.get(url [,config])
axios.delete(url [,config])
axios.post(url [,data[,config]])
axios.put(url [,data[,config]l)
  1. 发送GET请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
	console.log(result.data);
]);
  1. 发送POST请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then(result)=>{
	console.log(result.data);
});

4.Vue项目中使用Axios

  • 在项目目录下安装axios：
  • 需要使用axios时，导入axios：

三、前后端开发

1.前后端混合开发

在这里插入图片描述

  • 沟通成本高
  • 分工不明确
  • 不便管理
  • 不便维护拓展

2.前后端分离开发（主流）

  • 当前最为主流的开发模式：前后端分离
    在这里插入图片描述

3.YApi

在这里插入图片描述

4.前端工程化

  • 前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
    1. 模块化：Js、css
    2. 组件化：UI结构、样式、行为
    3. 规范化：目录结构、编码、接口
    4. 自动化：构建、部署、测试

（1）环境准备

vue-cli：

  • 介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
  • Vue-cli提供了如下功能：
    1. 统一的目录结构
    2. 本地调试
    3. 热部署
    4. 单元测试
    5. 集成打包上线
  • 依赖环境：NodeJS

安装NodeJS：
  • 注意：D:\nodejs 这个目录是NodeJS的安装目录
  • 切换npm的淘宝镜像
  • 使用管理员身份运行命令行，在命令行中，执行如下指令：
npm config set registry https://registry.npm.taobao.org

安装vue-cli

  • 使用管理员身份运行命令行，在命令行中，执行如下指令：
npm install -g @vue/cli
  • 这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

（2）vue项目简介

Vue项目-创建：

  • 命令行：vue create vue-project01
  • 图形化界面：vue ui

Vue项目-目录结构
基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
在这里插入图片描述
src目录：
在这里插入图片描述
Vue项目-启动：
在这里插入图片描述
在这里插入图片描述
Vue项目-配置端口：

打开vue.config.js

const i defineconfig } = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	devserver: {
	port: 7000,
	}
})

（3）Vue项目开发流程

  • 默认首页index.html
  • 入口文件main.js

在这里插入图片描述

  • Vue的组件文件以.vue结尾，每个组件由三个部分组成: <template> 、 <script>、<style>。
    在这里插入图片描述

5.Vue组件库Element

（1）什么是Element

在这里插入图片描述

（2）安装Element

  • 安装ElementUl组件库(在当前工程的目录下)，在命令行执行指令：
  • 引入ElementUl组件库(main.js)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
  • 访问官网，复制组件代码，调整

6.Vue路由

（1）Vue Router

  • 介绍：Vue Router是Vue的官方路由。
  • 组成：
    • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
    • <router-link>：请求链接组件，浏览器会解析成<a>
    • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
      在这里插入图片描述

（2）Vue路由

  • 安装（创建Vue项目时已选择)
  • 定义路由
    在这里插入图片描述
  • 重定向
{
	path: '/',
	redirect: '/dept'
}

7.打包部署

（1）打包

  • 点击build后面的三角号
  • 生成的文件在dist文件夹
    在这里插入图片描述

（2）部署（Nginx）