Web开发1--前端开发

注：该博客为黑马程序员课程笔记

黑马程序员2023新版JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili

前后端分离Web开发知识点结构图，及前后端分离基本流程图

前后端开发都需要满足接口，阅读接口文档再根据文档开发，注意这个接口不是interface，而是一个实实在在的功能，比如说添加用户等等。

接口文档管理生成平台：http://yapi.smart-xwork.cn

改平台的使用教程不做描述，每个公司可能使用的平台不一样，了解即可

一、数据请求

1、Ajax

同步和异步：

原生Ajax现在已经不怎么实用，基本都是Axios来发起并且接受请求

2、Axios：对原生的Ajax进行封装，简化书写，快速开发。

注意：浏览器访问地址都是get请求，所以说把post请求地址在浏览器里直接搜索是会失败的

引入文件前需要在该项目下载axios，

右键项目文件----集成终端中打开----npm install axios即可下载

然后引入即可，这里和下面图片方法不一样，应该是都行

<script>
import axios from 'axios';
</script>

注意，这里的写法和之前学习Vue的写法有所不同，下面·才是简单常用的用法

          //("url地址"?参数)或者("url地址",参数)或("url地址"+参数)视情况而定，下面就是用+
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
   .then((response)=>{
        console.log(response.data.data.forecast);
        that.weatherList = response.data.data.forecast
    },function(err){

    }
)

//第二行可以换为    .then(function(response){    一样
//axios.post("https://autumnfish.cn/api/user/reg", { username: "盐焗西兰花" })
//axios.post("https://autumnfish.cn/api/user/reg", "id == 1")   多种写法视情况

二、前端工程化 

Vue开发大型项目需要考虑以下全部，使用现有的根据Vue脚手架（Vue-cli）创建工程化的项目

 安装NodeJS，切换淘宝源，安装脚手架以后

Vue项目创建：以图形化界面常用

图形化界面操作步骤：

新建项目文件夹--进入后地址栏cmd--执行vue ui命令，即可自动调出图形化界面

点击"在此创建新项目"（如下）---下一步模板选"手动"---选择插件功能"Router"---最后选择vue版本和语法规范(如下)

其创建的项目文件结构如下 

 

 注意：对于在创建的Vue默认模板中index.htnl     app.vue    main.js三个文件是如何关联并且在页面显示数据还不清楚

 三、Element

Element - The world's most popular Vue UI framework

注意安装是在当前项目下ctrl+`，输入代码安装在node_modules，不是全局安装

引入组件库在main.js当中

第三步需要定义一个组件文件（），然后在官网在复制组件代码

注意element组件文件的定义一般是写在View里面的，如下图，代码直接官网复制即可，如下

并且需要在App.vue当中的div里面直接输入<element     然后其他的就自动联想，导入

<template>
  <div id="app">
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default{

}
</script>

 Element举例：

1、Table表格

注意样式和上面一样是粘贴到<template><div>这里</div></template>
数据在放在下面的位置
<template>
  <div>
    <!-- Table表格 -->
    <!-- :是v-bond,绑定数据模型也就是下面的tableData数组对象，数组中就是一个个的对象，boder就是是否带有纵向边框
     el-table-column是一列，prop是说明需要展示的是每个对象中的那个属性（下面一个对象不止一个属性）
地址一列没有指定宽度，默认剩下全部-->
    <el-table :data="tableData" border 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>
  </div>
</template>

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

结果如图

 2、Pagination分页

 Background表示有背景色  
 其中有两个监听事件，分别是每页展示记录数发生变化、当前页码发生变化时
layout当中 元素分别表示  每页多少   前一页    下一页  跳到多少页   共多少数据 
这个total里面的值项目中一般是数据的长度，这里写1000学习用

<!-- Pagination分页，即写在template中的内容 -->
    <el-pagination background layout="sizes, prev, pager, next, jumper, total" 
      @size-change="handleSizeChange"  
      @current-change="handleCurrentChange"
    :total="1000"></el-pagination>

<!-- script中需要声明上面的两个监听事件函数，写在data下面 -->
  methods: {
    handleSizeChange:function (val){
        alert("每页记录数变化"+val)
    },
    handleCurrentChange:function (val) {
        alert("页码变化"+val)
    }
  },

 结果如上图所示，改变layout当中参数位置，渲染的页面中其顺序也会改变

 3、对话框组件：Dialog

       即点击按钮或者其他事件弹出的对话框Element - The world's most popular Vue UI framework

<!-- Dialog对话框 
visible.sync是false会隐藏对话框，
点击下面的按钮变成true就会显示对话框（data中这个参数dialogTableVisible被定义默认false）-->
    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="tableData">
        <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>

4、表单Form    

Element - The world's most popular Vue UI framework

下面的例子是将表单写在了Dialog对话框中，点击按钮呈现

重点是如何采集表单当中的数据，即通过form数据模型

<template>
    <div>
        <!-- Form表单组件显示在Dialog对话框中 -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form表单</el-button>
        <!-- 下面一行同Dialog，第二行注意通过：model绑定变量也就是数据模型form，在data当中需要声明form -->
        <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="80px">
                
                <!-- 下面是表单中的三个框框   都可以通过v-model传递数据给数据模型form-->
                <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-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
            }
        };
    },
    methods: {
        onSubmit:function(){
            // form当中就是表单的值，但是输出要加上this，输出当前表单的form
            // 且因为此时form是一个对象，注解输出的也不是数据，需要把该js对象转化为json格式的字符串
            alert(JSON.stringify(this.form));
        }
    },
};
</script>

<style></style>

 5、Container 布局容器

Element - The world's most popular Vue UI framework

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

 详细情况见项目代码

6、Vue路由

即点击侧边栏实现页面跳转需要路由来实现

前端路由：点击侧边栏----地址栏自动变化----路由会自动更新显示与url地址对应的组件

 src--router---index.js当中配置路由信息

注意访问运行项目时访问的默认是localhost:7000/#/，也要配置，不然没法访问。

配置完成了后，main.js会自动生成，看看就好

这只是其中一种方法：path是路径，component后边是文件位置
const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    //默认时使用重定向功能，即让/emp来执行
    redirect: '/emp'
    //也可以直接让他访问下面的emp用户管理
    // name: 'emp',
    // component: () => import('../views/tlias/DeptView.vue')
  },
]

此时在DeptView.vue和EmpView.vue当中写路由链接组件，一样的

//DeptView.vue和EmpView.vue里面都是一样的
<el-menu-item index="1-1">
   <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
   <router-link to="/emp">员工管理</router-link>
</el-menu-item>

第三步需要在对应区域加上标签，因为是写在App.vue当中的div里面，所以说需要把之前的注释掉，再加上<router-view></router-view>

 7、前端工程打包部署

运行和打包位置如图，打包之后的文件会放在新增的dist目录下，然后再将其部署在服务器上面 

Nginx：部署项目

80端口默认本占用，点击exe也无法运行nginx，需要手动找到并且关闭

cmd运行：netstat -ano | findStr 80

任务管理器当中关闭即可

 如果是系统进程，不能关闭，则在./conf/nginx.conf当中36行修改默认端口位置，比如90

我是直接改的90，以后就不用麻烦了

直接浏览器便可以访问上面部署的项目
http://localhost:90/