开发环境待

一 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的路径)

如图:

(2)设置PATH环境变量(如(1)操作)

(3)安装Tomcat

解压tomcat压缩文件

Tomcat 的目录层次结构

<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),第一步,注意勾选选项

(2)勾选选项web

(3)项目名字

(4) 建包,类

建好之后需要再 web.xml文件中进行配置,配置的地址就是前端进行后端执行特定文件的窗口

如图,我建立了login的类.前端在访问后端的时候的就会扫描web.xml文件中你需要访问的地址,如果我前端访问的是login这个类,就会以这个为窗口进行执行所执行的后端的代码.

(注意:

<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选项进行配置

1,点击"+"号进行添加

2,勾选Local

3,进入Configure..

4,对,Tomcat Home进行勾选,找到bin目录的上一级(注意是上一级)

5,然后把After launch进行取消勾选

6,进入Demployment

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 文件

方式 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

创建成功后,在命令行窗口启动项目

输入: npm run serve

启动成功后,会出现访问项目地址: http://127.0.0.1:8080/

在命令行中 ctrl+c 停止服务

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建

单页面应用变得易如反掌

可以在我的百度网盘中获取这个文件:

链接：https://pan.baidu.com/s/10S8VdsHBL7KSkj3jnDbVKg
提取码：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"结束操作)

这是官网: 组件 | Element

点击进去,里面有很多优秀的组件直接进行复制,可以节省我们的很多时间.

三简单调试

这样前后端环境搭建基本完成,进行简单调试.

前端:

后端:

重写doget方法进行简单操作,然后在控制台观察能否输出