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

最新推荐文章于 2024-05-29 11:07:03 发布
最新推荐文章于 2024-05-29 11:07:03 发布
阅读量951 收藏 10
点赞数
分类专栏： Java 文章标签： vue.js 前端框架 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44544908/article/details/129891061
版权

一、Vue

在这里插入图片描述

1.什么是Vue?

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

在这里插入图片描述

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

2.Vue快速入门

  1. 新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
  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
<a v-bind:href="ur1">传智教育</a>

<a :href="ur1">传智教育</a>
  • v-model
<input type="text" v-model="url">

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

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

（2）v-on
<input type="button" value="按钮" v-on:click="handle()">

<input type="button" value="按钮" @click="handle()">

<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
<div v-for="addr in addrs">{{addr}}</div>

<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

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文件
<script src="js/axios-0.18.0.js"></script>
  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：
npm install axios;
  • 需要使用axios时，导入axios：
import axios from 'axios';

三、前后端开发

1.前后端混合开发

在这里插入图片描述

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

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

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

3.YApi

  • 介绍：YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
  • 地址：http://yapi.smart-xwork.cn/
  • 功能：
    1. API接口管理
    2. Mock服务

在这里插入图片描述

4.前端工程化

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

vue-cli：

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

安装NodeJS：

  • 官网：https://nodejs.org/zh-cn
    在这里插入图片描述
  • 配置npm的全局安装路径
  • 使用管理员身份运行命令行，在命令行中，执行如下指令：
npm config set prefix "D:\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
  • Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
  • 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。
  • 官网：https://element.eleme.cn/#/zh-CNListener

在这里插入图片描述

（2）安装Element
  • 安装ElementUl组件库(在当前工程的目录下)，在命令行执行指令：
npm install element-ui@2.15.3
  • 引入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项目时已选择)
npm install vue-router@3.5.1
  • 定义路由
    在这里插入图片描述
  • 重定向
{
	path: '/',
	redirect: '/dept'
}

7.打包部署

（1）打包
  • 点击build后面的三角号
  • 生成的文件在dist文件夹
    在这里插入图片描述
（2）部署（Nginx）
  • 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
  • 官网： https://nginx.org/
    在这里插入图片描述
  • 部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下（默认文件可以删掉）。
  • 启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号
  • 查看：打开任务管理器是否存在Nginx进程
  • 如果没有可以查看错误日志（log/error.log）
  • 在命令行中输入netstat -ano | findStr 80可查看占用80端口的进程号
  • 跟换端口：（conf/nginx.conf）找到默认端口（36行）更改为90
  • 访问：http: // localhost:90
派大星啦啦啦
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java前端框架有哪些_web前端框架有哪些
weixin_42697609的博客
02-15 3341
前端开发并不难，但是要想做得优雅、健壮并不容易，使用一个好的前端框架能够帮你很多忙。本文列举了20个优秀的前端框架，供选择使用。1. Twitter BootStrap (Apache v2.0；响应式)(推荐学习：PHP视频教程)时髦、直观并且强大的前端框架，让Web开发变得更加容易。2. Foundation (MIT；响应式)最先进的响应式前端框架。3. 960gs(GPL&MIT；...
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
10-24
《基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码解析》 图书管理系统是信息化时代中常见的应用，它能够有效地管理和组织大量的图书信息，为用户提供便捷的查询、借阅、归还等功能。本系统采用的是经典的...
java框架练习前端页面
03-05
公众号前端页面。练习java框架，ssh或者ssm都可以练习，数据库自己建立
Java Web 前端到后台常用框架介绍
公众号：Java后端
09-11 664
1 SpringMVC参考博文：http://blog.csdn.net/evankaka/article/details/45501811基本原理流程，3个线程以及之间...
2024年7款最佳 Java 框架
最新发布
2401_85112058的博客
05-29 1249
在其完全拥抱 MVC框架之后，Spring 不断的发展与变化着，转变成了一个功能全面的面向互联网应用程序的Java框架, 它能提供给软件工程师的是一个用于web应用程序开发的强大工具集，以及针对安全项目的应用程序配置。Apache软件基金会为开发人员提供了一个广泛的工具，用于创建企业级的面向Web的应用程序，开发过程的优化从开始贯彻到结束，还提供后期的维护。不管文档有多少，Spring MVC都可能并非是一个Java开发的新手能掌控的，尽管这并不是框架的一个直接缺陷，但学习曲线真的是有点太陡了。
Java Web前端到后台常用框架介绍
至尊宝猴哥
04-01 1085
版权声明：本文为博主原创文章，转载注明出处http://blog.csdn.NET/u013142781一、SpringMVChttp://blog.csdn.net/evankaka/article/details/45501811spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架，即使用了MVC架构模式的思想，将web层进行职责解耦，基
java 前端框架_前端框架是什么?web前端框架有哪些?
weixin_42386511的博客
02-16 664
前端框架是什么?web前端框架有哪些?2017-09-18前端框架是什么？框架这个词能够让你想到那些东西？第一时间想到的是不是jquery、backbone、angular等等，其实我想是这样的，框架是提供一套完整的解决方案，按照规定好的代码结构来做编排，同时前端功能越来越强大而产生的前端框架，所以开发web产品就很必要用前端框架(前端架构)。上面简单的诠释了前端框架是什么？再来看看web前端框架...
JavaWeb入门（学生管理系统前后端开发，ajax+servlet+tomcat+vue+maven+mysql...)
07-15
4. **Vue.js**：Vue是一个轻量级的前端MVVM（Model-View-ViewModel）框架，它易于学习且高效。在学生管理系统中，Vue用于构建用户界面，提供数据绑定和组件化能力，使界面更加动态和交互友好。 5. **Maven**：Maven...
vue+servlet的文件上传案例.rar
01-11
本示例结合了前端的Vue.js框架和后端的Servlet技术，提供了一种实现文件上传的解决方案。Vue.js是一个轻量级的渐进式JavaScript框架，而Servlet则是Java Web开发中的核心组件，用于处理HTTP请求和响应。接下来，我们...
毕设项目；通过JavaWeb+Vue前端框架实现网上拍卖网站.zip
10-20
这是一个基于JavaWeb后端技术和Vue.js前端框架实现的网上拍卖网站的毕设项目。这个项目展示了如何将这两种技术结合，构建一个完整的Web应用程序，让用户能够在线浏览、竞拍商品。 **JavaWeb技术** JavaWeb是Java...
javaweb图书管理系统，前端+后端+数据库全
03-16
在本项目中，可能使用Bootstrap或Vue.js等现代前端框架来提高用户体验和响应速度，也可能包含自定义的JavaScript脚本来处理动态数据和交互逻辑。 后端部分主要负责业务逻辑处理和数据访问，常使用Java Servlet、JSP...
java-前端页面模板
03-04
本模板未使用任何前端框架，简单易上手。简单修改后即可满足基本需求。登录、查询展示等功能页面都有。
web_javaweb前端模版_javascript_web前端模板_css_web登录_
09-30
Javaweb前端模板，包含登录，管理页面等
javaweb商城前台页面模板
01-05
javaweb商城前台页面模板，适用于新手或者一定基础。希望有帮助！
javaex 前端框架
09-10
Javaex最简单易用的前端框架由java程序员以后端开发者的使用角度而设计并开发的前端框架,不修改原生html、js语法,不创造新的语
介绍10款web前端框架.zip_javaweb开发框架
01-07
介绍10款web前端框架.zip aliceui Amaze UI Fronzen UI h-ui layui ...
Javaweb重要知识点总结（六）常见的前端框架
zhulin1028的博客
07-01 2105
目录 1. EasyUI 2. MiniUI 3. jQueryUI 4. Vue.js 5. AngularJS 6. AngularJS 1. EasyUI EasyUI 是一种基于 jQuery 的用户界面插件集合。easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。优势：开源免费，页面也还说的过去。 2. MiniUI 基于 jquery 的框架，开
二、JavaWeb基础(BootStrap前端框架)
kejizhentan的博客
09-19 1277
一 、BootStrap概念概述 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是响应式布局，同一套页面可以兼容不同分辨率的设备。 二、快速入门 下载Bootstrap 点击下载BootStrap框架 在项目中将这三个文件夹复制 创建html页面，引入必要的资源文件 <!DOCTYPE html> <html lang="
javaweb项目前端架构
05-13
2. 前端框架：如Bootstrap、Vue.js、React.js等，可以快速搭建界面和实现交互效果。 3. AJAX技术：用于异步加载数据和更新网页内容，提高用户体验。 4. 前端模板引擎：如Freemarker、Thymeleaf等，用于生成动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值