注:该博客为黑马程序员课程笔记
黑马程序员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/