顺企网浙江网站建设,玉山县建设局网站,网站小视频怎么做代理,关键词分析网站前端的大体流程#xff1a;首先是Login登录组件#xff0c;当输入用户名和密码之后#xff0c;发送post请求到后端#xff0c;然后根据返回的数据的是否正常#xff0c;如果正常#xff0c;将返回的token以及用户名保存到sessionStorage中#xff0c;并使用导航守卫进行… 前端的大体流程 首先是Login登录组件当输入用户名和密码之后发送post请求到后端然后根据返回的数据的是否正常如果正常将返回的token以及用户名保存到sessionStorage中并使用导航守卫进行跳转到主页面。主页面中有默认页面目前没有做本打算默认页面是显示所有服务的服务状态以及可以重启按钮等操作的除了默认按钮之外就是就是应用名*宝和*神。然后当点击这两个应用名之后会显示相对应的服务名服务名下面是一个表格这个表格是公共组件的里面的数据是从Vuex这个公共组件里面获取的也就是当你点击服务名的时候会将相应的服务名添加到vuex中这样做的好处是当你点击*神的时候下面的公共组件也会显示*宝的服务名当点击*宝的时候也会显示*神的服务名。疑问对于前端的页面认证我使用的是给路由中添加元数据然后再主入口组件中使用全局守卫进行判断这个元数据如果满足判断是否已经登录 去seessionStorage中取值如果没有登录使用导航守卫跳转到登录页面。问题前端已经做了登录页面验证后端是否还需要使用DRF中的登录认证组件进行登录页面验证如下定义在入口组件中的全局守卫相当于一个看门狗每个请求都会经过这个全局守卫对元数据是auth:true进行验证。下来根据主页面来说说主体思路先看主入口文件部分内容导入了很多东西可以进行全局引用import Vue from vue
import App from ./Appimport router from ./router #这是路由组件// elementUI 导入
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
// 调用插件
Vue.use(ElementUI);//引入全局的组件
import Public from ./components/Public/Public #这是上图中所说的公共组件Vue.component(Public.name,Public);//引入Vuex,进行状态管理 #这是Vuex进行状态管理
import store from ./store//导入axios #这是axios以后再其他地方使用this.$http. 的方式引用
import * as api from ./restful/api
console.log(api)
Vue.prototype.$httpapi;//导入全局样式
import ../static/global/global.css下来是路由组件路由组件中children字体意思是这个组件有孩子组件这个children是前端同事帮我加的。和自己之前写的有点差别不过觉得这个更规范。import Vue from vue
import Router from vue-routerVue.use(Router)import HelloWorld from /components/AppName/HelloWorld
import CaiBao from /components/CaiBao/CaiBao
import HeShen from /components/HeShen/HeShen
import Login from /components/Login/Login
import ServiceStatus from /components/ServiceStatus/ServiceStatusexport default new Router({linkActiveClass: is-active,mode: history,routes:[{path:/, #首先是去找Login组件name:login,component:Login},{path:/heyan/detailpage, #登录成功后登录组件中会使用导航守卫跳转到这个name:HelloWorld,component:HelloWorld,children:[{path: /, #这个是我在开始时说的那个默认显示页面想用python-ansible-api显示组件相关信息还没做 name: ServiceStatus,component:ServiceStatus,},{path:/caibao/:userId, #当在HelloWorld组件中点击router-link时跳转到这里name:caibao,component:CaiBao,meta:{//如果是true表示访问该组件时需要登录 #前面说的元数据auth:true}},{path:/heshen/:userId, #和上面的一样name:heshen,component:HeShen,meta:{//如果是true表示访问该组件时需要登录auth:true}},]},]})App组件中只有一行router-view和Login组件对应提供出口。Login组件 loginHandler方法是点击登录按钮触发的this.$http.userLogin(params)这个是发送axios请求并携带参数这种发送axios请求的方式之前说到的。然后根据返回的值判断是否要健token和用户名存放到sessionStroage还有就是跳转到HelloWorld组件中。methods:{loginHandler(){let params {username:this.username,pwd:md5(this.password),};console.log(params);this.$http.userLogin(params).then(res{console.log(res);if (!res.data ) {sessionStorage.setItem(access_token,res.data);sessionStorage.setItem(username,res.username);this.$router.push(/heyan/detailpage);}}).catch(err{console.log(err);})},}HelloWorld组件根据钩子函数当这个组件创建的时候会发送一个get请求从而从数据库中获取到相应的应用名然后根据for循环显示到页面中最后使用router-link进行跳转到路由中的children部分。需要传递路由参数params。script
export default {name: LuffyHeader,data(){return{AppnameList:[],}},created() {this.getAppnameList();console.log(123)},methods:{getAppnameList(){this.$http.appnameList().then(res{// console.log(res);this.AppnameList res}).catch(err{console.log(err);});},}};
/scripthelloworld组件中有两个子组件里面的代码是大体相同的只说一个CaiBao这个组件。CaiBao组件当进入这个组件之后首先使用钩子函数created发送一个get请求主要是获取到根据应用的id获取到相应的服务名。public是公共组件也是表格当点击服务名的时候调用StorageServer方法我将这个服务名保存到vuex中起先我是直接保存为数组后来发现以后如果获取到分支之后分支如何和服务名建立关系所以此处我使用let声明了一个对象对面里面保存了服务名和分支名起先默认是空的。除此之外为了一个服务只保存一次我将vuex里面中指循环出来并将服务名保存到一个新的数组中然后判断点击的服务名是否在这个数组中如果不在添加进去。templatedivdiv idtestel-rowel-button classbutton-style typeprimary v-for(server,index) in servicelist :keyserver.id clickStorageServer(server.title){{server.title}}/el-button/el-row/divpublic //div
/templatescriptexport default {name: Caibao,data() {return {servicelist: [],}},created() {this.GetServiceList();},methods: {GetServiceList() {// console.log(this.$route)this.$http.ServiceList(this.$route.params.userId).then(res {this.servicelist res;// console.log(this.servicelist)}).catch(err {console.log(err)})},StorageServer(servername) {var StoreService [];let ServerNameAndBanrch {servername:,branch:null};this.$store.state.ServerNameAndBanrch.forEach(function (item,index) { #这里我使用for循环的方式将vuex值循环出来然后将服务名追加到#新的数组如果新增的服务名不在这里使用dispatc提交到vuex中。StoreService.push(item.servername)});if(StoreService.indexOf(servername) -1) return;ServerNameAndBanrch.servername servername;this.$store.dispatch(addserver,ServerNameAndBanrch);}}}
/script下来时public组件数据到放到了vuex那应该到拿出来了吧。首先还是使用create进行方法在组件创建的时候去vuex中拿一次数据然后我们应该实时的监听vuex中的值当新增了新的任务之后我们要实时的显示到public组件中所以我使用watch针对vuex中这个数据属性进行了实时的监听然后把新到的数据显示到页面中。scriptexport default {name: Public,data() {return {input10:,tableData: [/*{servername: zyp,branch:master,},*/]}},created() {if(this.$store.state.ServerNameAndBanrch.length0){this.$store.state.ServerNameAndBanrch.map(item {let obj{};obj.servername item.servername;obj.branch item.branch;this.tableData.push(obj)})}},watch:{$store.state.ServerNameAndBanrch:{handler:function () {this.dataVuex()},deep: true}},methods:{dataVuex(){console.log(this.$store.state.ServerNameAndBanrch);this.tableData [];if(this.$store.state.ServerNameAndBanrch.length0){this.$store.state.ServerNameAndBanrch.map(item {let obj{};obj.servername item.servername;obj.branch item.branch;this.tableData.push(obj)});console.log(this.tableData)}},/*显示分支:将服务名传递到后端执行shell并返回执行结果*/ObtainBranch(index,servername){console.log(test,servername.servername)},/*删除选项*/serverDelete(index,servername){this.$store.state.ServerNameAndBanrch.splice(index,1)}}}说了很多其实真正的功能还没有说到也就是上述截图中的获取分支打包还有重启这几个按钮这几个按钮的代码没有写但是使用的技术已经测试通过了下面使用单独的一篇来进行说明。针对第一次下前端代码的感悟第一次写一定要逻辑清晰否则就像我一样修修改改很多次。js中的基本操作一定要熟悉如对数组对象的操作。还有就是router-view的使用曾经自闭了很多次 转载于:https://blog.51cto.com/11726212/2379397
