一、BOM对象.
指的是窗口对象,也就是windows的内容。
二、DOM对象
指的是文件对象,这里把html文件看成一个文件,JS可以获取这些文件,并进行增删改查。如下进行修改:
var divs= document.getElementsByClassName("cls");
for(let i =0;i<divs.length;i++)
{
const div =divs[i];
div.innerHTML +="<font color ='red'>very good</font";
}
var names =document.getElementsByName("hobby");
for(let i =0;i<names.length;i++)
{
names[i].checked =true;
三、发送请求ajax/axios
axios对ajax进行了封装,可以发送post/get请求到接口获取数据,再传递给Vue/DOM进行修改,演示axios示例代码如下:
方法1:function get()
{
axios({
method:"get",
url:"https://blog.csdn.net/lx00000025/article/details/132382087",
}).then(result=>{
console.log(result.data)
})
}
方法2:function post()
{
axios.post("http://baidu.com",id="1").then(result=>{
console.log(result.data)
})
}
同时推荐到yapi进行接口测试
四、Vue
先简述一下vue的整体架构
1.node_moudles指的是一些依赖文件,比如你要使用elementUI组件,就要下载到这个文件中,然后进行import操作。
2.public存储静态资源比如首页就存储在里面,但我们不需要操作,我们需要操作APP.vue就可以操作index.html了
3.src 源码!很重要,里面的文件asset是我们需要存储的一些资源,比如图片,component指的是组件,router是路由相关,view是我们的视图,比如我们要使用一些elementui的样式可以在里面新建一些东西,但必须要注意要export导出,然后才能调用。
4.App.vue,这是我们真正要编辑的部分,分为三部分template(编写html代码),script(vue需要的数据,方法),style(样式)
ElementView.vue
<template>
<div>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<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>
<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: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
};
</script>
<style>
</style>
App.vue
<template>
<div >
<!-- <h1>{{ message }}</h1> -->
<element-view></element-view>
</div>
</template>
<script>
import ElementView from './views/element/ElementView.vue'
export default{
components: { ElementView },
data(){
return {
message:"hello vue"
}
},
methods:{
}
}
</script>
<style>
</style>
main.js指的是主程序的入口,在这里我们要把使用的组件,页面,vue全部引用,并创建vue对象
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElemntUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElemntUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
还有一个比较重要的就是vue.config.js这个相当于IDEA中的配置文件,我们可以在这里修改端口号
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElemntUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElemntUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
五、Vue路由
首先进行安装router组件。
npm install vue-router@3.5.1
调试路由的主要部分如下(在src中找到router文件):
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
第一种方式要先导入页面,第二种是在函数体中导入,建议用第二种方式,这里我修改如下
const routes = [
{
path: '/work',
name: 'Work',
component: () => import( '../views/4PL/WorkView.vue')
},
{
path: '/element',
name: 'Element',
component: () => import( '../views/4PL/ElementView.vue')
}
]
这里的/work 就是WorkView
这里的代码会导致首页缺失,这个时候我们要重定向一下,让首页指向一个页面,修改如下:
const routes = [
{
path: '/work',
name: 'Work',
component: () => import( '../views/4PL/WorkView.vue')
},
{
path: '/element',
name: 'Element',
component: () => import( '../views/element/ElementView.vue')
},
{
path:'/',
redirect:'/work'
}
]
六、Nginx服务器代理(打包部署)
目前唯一要注意的就是端口占用情况,要在conf里进行修改。
作为一个后端程序员,前端部分完结撒花!(开玩笑,但对于初学者来讲就可以了)
这里给一张图表示前后端的链接。
七、JWT登录功能
架构示意图
逐层调用并逐层返回,在数据库部分只需查询以目前账号密码的用户是否存在即可,但由于涉及到很多次的数据传输,使其安全可靠性不高,所以我们需要引入JWT令牌去加密,提高安全性。
Controller代码如下:
@Autowired实现注入service层后在controller的方法中调用对应service层方法即可,最后将其返回给前端。
Service层代码
调用持久层中的方法并返将其返回给controller层
Dao层代码
会话技术:
一次会话中可以有多次请求和响应。每个单独浏览器用户算作一次会话。
优点:以便同一会话(单个用户)共享数据
会话跟踪需要JWT令牌技术来实现,还有两种方式cookie,session
cookie、session优缺点
JWT会话技术
一、优点:
1.支持移动端、PC端
2.减轻负载均衡下多服务器认证问题
3.减轻服务器端存储压力
4.安全可靠
二、简介
三、生成和校验
生成代码如下:
检验代码如下:
八、Docker
一、简介:
这里可以看出明显的优势,和JVM类似,可以无视系统自动配置好运行所需环境,私有化部署非常方便。