前端views开发简单CURD

根据原型设计图，完成前端页面的开发

使用ElementUI完成页面的开发

1. 安装ElementUI

▼
text
复制代码
npm i element-ui -S

2. 在main.js中引入ElementUI

▼
text
复制代码
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3. 在App.vue中使用ElementUI

▼
text
复制代码
<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

4. 使用ElementUI的组件 做出页面

▼
text
复制代码
<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

在钩子函数created中，向后端服务器发起请求,调用后台接口，获取数据

接受后台返回的数据，渲染到页面上

网络编程和服务器

B/S 和 C/S

C/S结构 ：全称为 Client/Server 结构，是指客户端和服务器结构。常见程序有 QQ ,百度网盘等软件。

▼
markdown
复制代码
C/S结构的优点是：客户端可以直接使用服务器的资源，而不需要下载到本地，这样可以节省本地的资源。
C/S结构的缺点是：客户端需要安装专门的客户端软件，而且客户端软件的更新也需要重新下载安装。

B/S结构 ：全称为 Browser/Server 结构，是指浏览器和服务器结构。常见的浏览器有 Chrome ,IE ,Firefox 等。

▼
markdown
复制代码
B/S结构的优点是：客户端不需要安装专门的客户端软件，只需要浏览器就可以访问服务器的资源。
B/S结构的缺点是：客户端不能直接使用服务器的资源，需要通过浏览器来访问，这样会增加服务器的压力。

新型 BS 结构 : 需求和技术发展的产物

新型 BS 结构** : 需求和技术发展的产物

▼
markdown
复制代码
瘦客户端 : 传统的 B/S .   服务端: 负责业务逻辑;   客户端: 负责界面渲染.
富客户端 : 超级 BS=CS+BS , 界面华丽.  服务端:负责业务逻辑;   客户端: 负责界面渲染 + 少量的业务逻辑.

网络通信三要素

▼
markdown
复制代码
IP地址: 用来标识网络中的一台计算机
端口号: 用来标识计算机中的一个应用程序
协议: 用来规定数据传输的规则

UDP和TCP 协议

▼
markdown
复制代码
UDP: 无连接的, 不可靠的, 速度快.

TCP: 面向连接的, 可靠的, 速度慢.
三次握手: 1. 客户端向服务器发送请求. 2. 服务器向客户端发送响应. 3. 客户端向服务器发送确认.
四次挥手: 1. 客户端向服务器发送请求. 2. 服务器向客户端发送响应. 3. 服务器向客户端发送确认. 4. 客户端向服务器发送确认.

HTTPS 和 HTTP

▼
markdown
复制代码
HTTPS: 安全的 HTTP 协议, 传输的数据是加密的.
HTTP: 不安全的 HTTP 协议, 传输的数据是明文的.
特点:
1. **无状态：协议对客户端没有状态存储，对事务处理没有“记忆”能力。**"

2. HTTP/1.0，每次请求需要通过 TCP 三次握手建立连接，请求结束通过四次挥手断开连接，一次连接只能处理一个请求数据的传输。HTTP/1.1 一次连接成功之后可以处理·。

3. 基于请求和响应：基本的特性，由客户端发起请求，服务端响应

WEB 资源概述

▼
markdown
复制代码
静态资源:服务器上的文件, 如: html, css, js, 图片, 视频, 音频等.
动态资源: 服务器上的程序, 如: servlet, jsp, php, asp, py, rb, go, nodejs 等.

服务器软件

分类

1. 静态服务器: 只能处理静态资源, 如: nginx, apache, tomcat 等.
2. 动态服务器: 只能处理动态资源, 如: tomcat, nodejs 等.
3. 静态+动态服务器: 可以处理静态资源和动态资源, 如: tomcat, nodejs 等.

JavaEE 规范: 一套规范, 一套接口, 多种实现.

• 在 JavaEE 中一共有 13 种规范。

• 常见的 JavaEE 规范有： JSP、Servlet、JDBC、XML、EJB

Tomcat 安装和启动

下载

Tomcat 官网: http://tomcat.apache.org/ Tomcat 下载地址: http://tomcat.apache.org/download-80.cgi

安装

1. 解压缩
2. 配置环境变量, 如: JAVA_HOME, CATALINA_HOME 等.
3. 修改配置文件,端口号.... 如: server.xml, web.xml 等.
4. 启动,运行 bin 目录下的 startup.bat 文件.

Maven构建Tomcat 服务器

1. 创建 Maven 项目

groupId: 组织的唯一标识, 一般是公司的域名倒写. artifactId: 项目的唯一标识, 一般是项目的名称. version: 项目的版本号, 一般是 1.0-SNAPSHOT.

2. 配置

1. 打包方式: war
2. 依赖: tomcat7-maven-plugin和 tomcat-war-plugin
3. 创建目录: src/main/webapp 和 src/main/webapp/WEB-INF 目录