• 博客园Logo
  • 会员
  • 周边
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 简洁模式 ... 退出登录
    注册 登录
tyrantblue
博客园    首页    新随笔    联系   管理    订阅  订阅
Java学习笔记 (十三) 前端基础2

Ajax

介绍

概念: Asynchronous JavaScript And XML, 异步的JavaScript和XML

作用:

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

同步与异步

ppWCv6S.png

</head>
<body>

    <div id="demo">
      <h2>让 AJAX 更改这段文本</h2>
      <button type="button" onclick="loadDoc()">更改文本</button>
    </div>
    
</body>
<script>
    function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "http://yapi.smart-xwork.cn/mock/169327/emp/list", true);
        xhttp.send();
    } 
</script>
</html>

Axios

介绍: Axios对原生的Ajax进行了封装, 简化书写, 快速开发

入门:

  1. 引入Axios的js文件
  2. shiyongAxios发送请求, 并获取响应结果

请求方式别名:(推荐简化)

  • axios.get(url[, config])

  • axios.delete(url[, config])

  • axios.post(url[, data[, config]])

  • axios.put(url[, data[,config]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
    <script src="js/axios.js"></script>
</head>
<body>
    <input type="button" value="获取数据Get" onclick="get()">
    <input type="button" value="删除数据post" onclick="post()">
</body>
<script>
    function get(){
/*
        //通过axios发送异步请求
        axios({
            method: "get",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result =>{
            console.log(result.data);
        })
 */
        //简化
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
            console.log(result.data);
        })
}
    function post(){
/* 
        //通过axios发送异步请求
        axios({
            method: "post",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data: "id=1"
        }).then(result =>{
            console.log(result.data);
        })
     
*/
        //简化
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result=>{
            console.log(result.data);
        })
    }
</script>
</html>

案例

基于Vue及Axios完成数据的动态加载展示

  1. 数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list
  2. 在页面加载完成后, 自动发送异步请求, 加载数据, 渲染展示页面(性别: 1 代表男, 2 代表女)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>

</head>
<body>
    <div id="app" align="center">
        <table cellspacing="0px" width="60%" border="1px">
            <tr align="center">
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作事件</th>
            </tr>
            <tr align="center" v-for="emp in emps">
                <td>{{emp.id}}</td>
                <td>{{emp.name}}</td>
                <td><img v-bind:src="emp.image" width="70px" height="50px"></td>
                <td ><span v-if="emp.gender==1">男</span><span v-if="emp.gender==2">女</span></td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
            
        </table>
    </div>
    
</body>
<script>
    new Vue({
        el: app,
        data: {
            emps:[]
        },
        mounted() {
            //发送异步请求
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                this.emps=result.data.data;
            })
        },
    })
</script>
</html>

前端工程化

介绍

前后端混合开发,:

  • 沟通成本高, 分工不明确, 项目不便管理, 不便维护扩展

前后端分离开发

  • 当前最为主流的开发模式: 前后端分离, 通过接口文档

  • 开发流程:

    1. 需求分析
    2. 接口定义(API接口文档)
    3. 前后端并行开发(遵守规范)
    4. 测试(前端 后端)
    5. 前后端联调测试

YApi

介绍: YApi是高效, 易用, 功能强大的api管理平台, 旨在为开发, 产品, 测试人员提供更优雅的接口管理服务

地址: http://yapi.smart-xwork.cn/

使用步骤:

  1. 添加项目
  2. 添加分类
  3. 添加接口

环境准备

前端工程化: 是指在企业级的前端项目开发中, 把前端开发所需的工具, 技术, 流程, 经验等进行规范化, 标准化

vue-cli

介绍: Vue-cli 是官方提供的一个脚手架, 用于快速生成一个Vue的项目模板

Vue-cli提供了如下功能:

  • 统一的目录结构
  • 本地测试
  • 热部署
  • 单元测试
  • 集成打包上线

依赖环境: NodeJS

安装教程: 黑马程序员p37

Vue项目简介

创建

  1. 命令行: vue create vue-project01
  2. 图形化界面: vue ui

目录结构:

  • 基于Vue脚手架创建出来的工程, 有标准的目录结构
    • node_nodules: 整个项目的依赖包
    • public: 存放项目的静态文件
    • src: 存放项目的源代码
      • assets: 静态资源
      • components: 可重用的组件
      • router: 路由配置
      • views: 视图组件(页面)
      • App.vue: 入口页面(根组件)
      • main.js: 入口js文件
    • package.json: 模块的基本信息, 项目开发所需要的模块, 版本信息
    • vue.config.js: 保存vue配置的文件, 如: 代理, 端口的配置等

启动

方式一: 以图形化界面的形式启动

ppWYVgK.png

方式二: 在项目目录下以命令行npm run serve启动

打开NPM脚本参考这篇博客

Vue项目开发流程

Vue的组件文件以 .vue结尾, 每个组件由三个部分组成, <template> <script> <style>

  • <template> : 模板部分, 由它生成HTML代码
  • <script>: 控制模板的数据来源和行为
  • <style>: css样式部分
<template>
  <div >
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: "Hello vue"
    }
  },
  methods: {
    
  }
}
</script>

<style>

</style>

Element

简介

Element: 是饿了么团队研发的, 一套为开发者,设计师和产品经理准备的基于Vue2.0的桌面端组件库

组件: 组成网页的部件, 例如: 超链接, 按钮, 图片, 表格, 表单, 分页条等等

官网: https://element.eleme.cn/#/zh-CHListener

快速入门

  1. 安装Element组件库(在当前工程的目录下), 在命令行执行命令
npm install element-ui@2.15.3
  1. 引入ElementUI组件库
import Element from 'element-ui';
import 'element-ui/theme-chalk/index.css';

Vue.use(ElementUI);

  1. 在src下新建element文件夹用来存放element组件

  2. 访问官网, 复制组件代码, 调整

<template>
<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
</template>

<script>
export default {
    
}
</script>

<style>

</style>
  1. 在app.vue中引用element
<template>
  <div >
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
}
</script>

<style>

</style>

记得安装 Vscode-element-helper 和 element-ui-helper 插件, 要不然可能不会自动补全, 在<element-vue>标签自动补全要加左尖括号

常见组件

  • Table 表格: 用于展示多条结构类似的数据, 可对数据进行排序, 筛选, 对比或其他自定义操作

  • Pagination 分页: 当数据量过多时, 使用分页分解数据

这里我出现了一个错误, 当在<template> 标签中同时加入以上两个组件时报错

  • Dialog对话框: 在保留当前页面状态的情况下, 告知用户并承载相关操作

这里按下第二次时会报错: ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

  • form 表单: 由输入框, 选择器, 多选框, 等控件组成, 用以收集, 校验, 提交数据
<template>
  <div>
    <!-- table -->
    <el-table :data="tableData" style="width: 100%">
      <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>

    <br />
    <!-- pagination分页 -->
    <el-pagination
      background
      layout="sizes, prev, pager, next, jumper, total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="1000"
    >
    </el-pagination>

    <br />
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

    <br />
    <el-button type="text" @click="dialogFormVisible = true"
      >打开嵌套表单的 Dialog</el-button
    >
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px" vis>
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogFormVisible: false,
      dialogTableVisible: false,
      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 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange: function (val) {
      alert("每页记录发生变化" + val + "条");
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val + "页");
    },
    onSubmit() {
      alert(JSON.stringify(this.form));
    },
  },
};
</script>

<style>
</style>

案例

<template>
    <div>
        <br>
        <el-container style="height: 1000px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: aqua">智能辅助系统</el-header>
            <br>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="230px" style=" border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">部门管理</el-menu-item>
                                <el-menu-item index="1-2">员工管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>

                <el-main>
                    <!-- 表单 -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="活动区域">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="日期">
                            <el-date-picker v-model="searchForm.enterdata" type="datetimerange"
                                :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" align="right">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <!-- 表格 -->
                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="姓名" width="140">
                        </el-table-column>
                        <el-table-column prop="img" label="图像" width="180">
                            <template slot-scope="scope">
                                <!-- 动态展示 -->
                                <img :src="scope.row.image" width="150" height="100">
                            </template>
                        </el-table-column>
                        <el-table-column label="性别" width="120">
                            <template slot-scope="scope">
                                {{ scope.row.gender == 1 ? "男" : "女" }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job" label="职位" width="120">
                        </el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="200">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination background layout="sizes, prev, pager, next, jumper, total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="1000">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            tableData: [],
            searchForm: {
                name: "",
                gender: "",
                enterdata: []
            }
        }
    },
    methods: {
        onSubmit: function () {
            alert("查询数据");
        },
        handleSizeChange: function (val) {
            alert("每页记录发生变化" + val + "条");
        },
        handleCurrentChange: function (val) {
            alert("页码发生变化" + val + "页");
        },
    },
    mounted (){
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                this.tableData = result.data.data;
            });
        }
}

</script>

<style></style>

Axios在项目目录下使用npm install axios安装, 然后在使用的页面引用import axios from "axios", 然后在钩子方法`mounted()中使用

Vue路由

简介

前端路由: URL中的hash(#号)与组件之间的对应关系

Vue Router

介绍: Vue Router是Vue的官方路由

组成:

  • VueRouter: 路由器类, 根据路由请求在路由视图中动态渲染选中的组件
  • <router>: 请求链接组件, 浏览器会解析成<a>
  • <router-view>: 动态视图组件, 用来渲染展示与路由路径对应的组件

安装(创建Vue项目时已选择):

npm install vue-router@3.5.1

定义路由:

  1. 需要在router文件夹下的index.js文件夹下定义

  2. 在想要跳转的地方进行修改:

    <el-menu-item index="1-1"><router-link to="/home">部门管理</router-link></el-menu-item>
<el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item>

  3. 在App.vue中让路由视图动态展示

    <router-view></router-view>

打包部署

打包

在NPM脚本下运行build vue-cli-service build选项

部署

Nginx

简介: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器, 其特点是占有内存少, 并发能力强, 在各大型互联网公司都有非常广泛的使用

官网: https://nginx.org/

安装:

conf: 配置文件目录

html: 静态资源目录

logs: 日志文件目录

temp: 临时文件目录

部署

将打包好的dist目录下的文件, 复制到nginx安装目录的html目录下, 启动双击nginx.exe文件, Nginx服务器默认占用80端口号

注意: 如果80端口号被占用, 可以在nginx.conf中修改端口号

cmd中查询端口号指令为netstat -ano | findStr 80

访问: http://locahost:设置的端口号

posted on 2023-04-02 15:44  雪化凛然  阅读(167)  评论(0)  编辑  收藏  举报
刷新页面返回顶部
Copyright © 2024 雪化凛然
Powered by .NET 9.0 on Kubernetes