一 web开发环境搭建
1 web开发环境概述
所谓web开发,指的就是从网页中向后端程序发送请求.与后端程序进行交互.
流程图:
1,Web服务器是指驻留于因特网上某种类型计算机的程序.
2,
可以向浏览器等Web客户端提供文档,也可以放置网站文件,让全世界
浏览; 它是一个容器,是一个连接用户与程序之间的中间件。
3,WEB服务器有很多,流行的WEB服务器有Tomcat 、 WebSphere 、
WebLogic、Jboss等
2 环境搭建
1,基本安装设置
<1>, 在小型应用系统或者有特殊需求的系统中,可以使用一个免费的web服务器: Apache 的Tomcat,该服务器支持全部JSP以及Servlet规范.
<2>,该Apache软件基金会(也就是Apache Software Foundation,),是专门为运作一个开源软件项目的 Apache 的团体提供支持的非盈利性组织。
<3>,Tomcat官方站点:http://tomcat.apache.org
<4>,获取Tomcat安装程序包
有需要的可以在百度网盘下载压缩包,压缩包名字为apache-tomcat:
链接:https://pan.baidu.com/s/10xlKNv58XCo1WPlNPNW9Rw
提取码:52wj
(1).tar.gz文件是Linux操作系统下的安装版本
(2).zip文件是Windows系统下的压缩版本
<5> 安装JDK
(1) 设置JAVA_HOME环境变量.(找到高级环境设置,找到安装Java的安装包,找到jdk那个包,复制路径,注意,是Java包的路径不是apache-tomcat的路径)
如图:
![](https://img-blog.csdnimg.cn/direct/adf091678f9b4dd7918e3e85e605ef33.png)
(2)设置PATH环境变量(如(1)操作)
(3)安装Tomcat
解压tomcat压缩文件
Tomcat 的目录层次结构
![](https://img-blog.csdnimg.cn/direct/332a1e4668014e02b51e982e31dd7525.png)
<5> 进行调试
(1) 双击 bin 目录下的 startup.bat 文件
输入 http://localhost:端口号 或http:127.0.0.1:端口号 或局域网ip:端口号
(2)修改操作
server.xml是Tomcat的主配置文件 提供Tomcat组件的初始配置,tomcat启动的时候执行这些初始化设置。 修改此文件后,需要重新启动tomcat。如果此文件修改错误,则tomcat不能正
常启动。
(3)修改服务器端口号
<connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000"
redirectPort="8443/>
(这步是为了避免让后端和前端的端口一致,如果一致,控制台可能会报错!!)
3,创建并发web项目
<1>.创建javaWeb项目
(1),第一步,注意勾选选项
![](https://img-blog.csdnimg.cn/direct/42fad0100bde4fbcb961b0ce5b63ac4b.png)
(2)勾选选项web
![](https://img-blog.csdnimg.cn/direct/339fcf9bced94cbc864d720028d4564a.png)
(3)项目名字
![](https://img-blog.csdnimg.cn/direct/0cc84b2938c845628e85f9d7b4ce4a98.png)
(4) 建包,类
建好之后需要再 web.xml文件中进行配置,配置的地址就是前端进行后端执行特定文件的窗口
如图,我建立了login的类.前端在访问后端的时候的就会扫描web.xml文件中你需要访问的地址,如果我前端访问的是login这个类,就会以这个为窗口进行执行所执行的后端的代码.
![](https://img-blog.csdnimg.cn/direct/7255c72b0ee14f7ca5b60bb0db211bdd.png)
(注意:
<url-pattern>/login</url-pattern> 这个标签里面的/login就是地址,切记,一定要在地址前,面加上"/",这是规定.)
对上述标签进行解读
(1)<servlet>元素用于注册Servlet,它包含有两个主要的子元素:
<servlet-name>和<servlet-class>,分别用于设置Servlet的注册名称和 Servlet的完整类名。
(2)一个<servlet-mapping>元素用于映射一个已注册的Servlet的一个对外访问路 径,它包含有两个子元素:<servlet-name>和<url-pattern>,分别用于指定 Servlet的注册名称和Servlet的对外访问路径。
(3)url-pattern配置模式:”/”代表当前web应用的根目录 精确匹配 例如/test 访问http://127.0.0.1/项目名/test
<servlet-mapping>
<servlet-name>myServlet</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping
除此之外还有一种配置方式,这里不在赘述.
(5)进入add Configuration选项进行配置
![](https://img-blog.csdnimg.cn/direct/e831b0f05e754a25a26a18e8a8931df6.png)
1,点击"+"号进行添加
2,勾选Local
![](https://img-blog.csdnimg.cn/direct/561c67a7d8824ee0a3039a4f45aec6f0.png)
3,进入Configure..
![](https://img-blog.csdnimg.cn/direct/aa392bdc2131449a82015e542268d966.png)
4,对,Tomcat Home进行勾选,找到bin目录的上一级(注意是上一级)
![](https://img-blog.csdnimg.cn/direct/f3ffa2ebb67a46dc93f39dc4b7d45165.png)
5,然后把After launch进行取消勾选
![](https://img-blog.csdnimg.cn/direct/7ac48fe651d844f4bd730af1b660bfb6.png)
6,进入Demployment
![](https://img-blog.csdnimg.cn/direct/1f806f5e3cda4c4cb8920f4eea03bbca.png)
7,点击"+"号进行部署
(全部点击应用,这样,后端基本搭建就完成了,如果有需要还要进行配置,例如,在web.xml中,添加数据库,之类jar)
二 vue-cli环境搭建
1 vue的简单概述
Vue (读音 /vju
ː
/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三 大主流框架! https://v2.cn.vuejs.org/
2 vue的优点
1.体积小 压缩后 33K
2.更高的运行效率 用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候,浏览器要不停的渲染新的 DOM 树,导致页面看起来非常卡顿。
基于虚拟 dom,一种可以预先通过 JavaScript 进行各种计算,把最终的 DOM 操作计算出来并优化的技术,最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定,让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上.
MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的
状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。
4 生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件!来即用实现 快速开发!对初学者友好、入门容易、学习资料多
3 Vue 安装
方式 1:直接用 <script> 引入
下载 Vue.js 并导入 js 文件
<script src="js/vue.js"></script>
![](https://img-blog.csdnimg.cn/direct/c561f63b1af647eb8da48d2caba3dc04.png)
方式 2:命令行工具 (CLI)
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使
用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。
第一个 Vue 程序
1. 导入开发版本的 Vue.js
2. 创建 Vue 实例对象,设置 el 属性和 data 属性
3.
使用简洁的模板语法把数据渲染到页面上
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM
的系统: 代码解析:
{{ 变量 }} ,插值表达式获取 data 数据
new Vue();创建 Vue 对象(VM 对象)
el:数据挂载的 dom 对象
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用 ID 选择器
可以使用其他的闭合标签,不能使用 HTML 和 BODY
data:{ message:’hello world’} model 数据
Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据,如对象,数组
4 vue-cli 搭建项目
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义
好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个
骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;
主要的功能
(1)
统一的目录结构
(2)
本地调试
(3)
热部署
(4)
单元测试
(5)
集成打包上线
需要的环境
Node.js
简单的说 Node.js 是一个前端 js 运行环境
或者说是一个 JS 语言解释器
。
npm
npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码。
使用 HbuilderX 快速搭建一个 vue-cli
![](https://img-blog.csdnimg.cn/direct/8126afd9e2ee4f0b8e8d5e8b63b29b8f.png)
创建成功后,在命令行窗口启动项目
![](https://img-blog.csdnimg.cn/direct/9bda437694f64cfcb4f655583f7928eb.png)
输入:
npm run serve
启动成功后,会出现访问项目地址:
http://127.0.0.1:8080/
在命令行中 ctrl+c 停止服务
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌
可以在我的百度网盘中获取这个文件:
链接:https://pan.baidu.com/s/10S8VdsHBL7KSkj3jnDbVKg
提取码:vo2v
提取码:vo2v
组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建
单页面应用变得易如反掌
打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3
搭建步骤:
1.
创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /*
导入路由
*/
import login from '../views/login'; /*
导入其他组件
*/
import content from '../components/content'; /*
导入其他组件
*/
Vue.use(router)
/*
定义组件路由
*/
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
//
导出路由对象
export default rout;
2.使用路由
<router-link to="/index">
首页
</router-link>
<router-link to="/content">
内容
</router-link>
<router-view/>
(这个的话就是跳转页面,这个是不讲过后端,直接前端跳转到另一个页面)
3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
(这样,基本的配置基本完成,在此基础上,还可以进行很多操作,例如进行
路由嵌套,
路由导航守卫等等)
我们再此之上配置
ElementUI
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库
(1)
安装 ElementUI
在控制台输入:
npm i element-ui -S
(2)在 main.js 中写入以下内容:
import
ElementUI
from
'element-ui'
;
import
'element-ui/lib/theme-chalk/index.css'
;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
(注意:如果进行任何的配置操作,都要"ctrl+c"结束操作)
![](https://img-blog.csdnimg.cn/direct/fbcf84731a024001aaade437b2899c8e.png)
这是官网:
组件 | Element
点击进去,里面有很多优秀的组件直接进行复制,可以节省我们的很多时间.
![](https://img-blog.csdnimg.cn/direct/d324c805dd694b07bddee04ccf7a3b30.png)
三 简单调试
这样前后端环境搭建基本完成,进行简单调试.
前端:
![](https://img-blog.csdnimg.cn/direct/9ab3348041b64c14a5784fab161ccda5.png)
后端:
重写doget方法进行简单操作,然后在控制台观察能否输出
![](https://img-blog.csdnimg.cn/direct/3246a5231c504cbdb2b4266c2da06fe5.png)