00:01
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去介绍一下子咱们开发当中所用到的一个模板。那咱们的后台管理系统项目啊,是在这个模板的基础之上进行二次的开发。那首先说啊,这个模板呢,是托管于getate上,你可以在get上进行搜索,那以及这个模板呢,是有两个版本,分别是简洁版和加强版,可以在get HUB上进行搜索,可以去查看翻阅。那首先说啊,这个模板呢,是由潘家成这位技术人员托管于给赫上。而且在很多企业内部当中,进行开发后台管理系统项目的时候,经常会用到这个模板。那所以说咱们的后台管理系统。这个项目也会使用到这个模板,而且咱们用的是这个简洁版。
01:00
那首先说啊,老师呢,已经把这个模板呢,已经下载下来了。那所以说啊,咱们呢,给他解一个压,那解压到咱们已经创建好的这个文件夹里面。那咱们解压一下,解压在咱们的view project文件夹当中。那咱们呢,去打开咱们的文件夹。那看一下子他的项目当中有这么多的文件夹以及文件,那咱们呢,一会儿呢,会一个一个的说道说道。那首先说打开这个文件夹当中,你会发现它缺了一样东西,就是缺了项目的依赖,就是node models文件夹。那所以说啊,咱们所做的第一件事儿啊,是把咱们项目当中所依赖的所有的项目啊,你给他怎么的安装上。因为安装好了之后,咱们要给这个项目运行起来,去看一下子它的一个模板。
02:04
他的模板大概是什么样子?对吧,好,那让他进行进行下载,那咱们呢,去稍微看一下它的一个结构啊,咱们稍微看一下,一会儿会详细的去看一下子。你看比如说在这有Mo Mo文件夹呢,咱们应该知道说Mo一些假的数据对吧,以及src啊,Public,像这些常用的开发的这些文件夹它都有。对吧,那咱们下载完毕之后啊,咱们呢,要尝试的给它运行起来,给这个模板运行起来。那怎么去运行呢?那咱们呢这块呢,不要去猜,那咱们呢,可以打开他的这个项目,在他的项目当中啊,有一个叫做package点儿杰森。那你看这个项目怎么去运行,这是不是有个叫div。对不,那所以说咱们可以运行就是n PM run div,把咱们的这个模板给它运行起来,稍微看一下它大概长成什么样子。
03:08
所以说以后一定要注意啊,项目怎么运行,到底是n PM run serve还是n PM run dev,要看一下这个package.jason当中,这里或者有一些MD文件当中,他也会告诉你的。那所以说这就是咱们的一个模板,以及点进来也可以稍微的去看一下。对吧,那咱们呢,一会儿呢,再回首去看这些结构,那咱们呢,主要做的第一件事是什么?先把这里面的文件夹与文件稍微认识一下。那咱们呢,就去聊聊,那这块咱们也写一下子,就是模板的文件与文件夹的认知。那首先说那咱们呢,你得注意咱们采用的是这个哪个模板,是简洁版的模板啊,这块要注意一下,如果是加强版的,可以自己去下下稍微看一眼。
04:05
好,那咱们一个说,先说B的文件夹,Buil build的文件夹。那首先说啊,在build的文件夹当中有一个index.js,那这里啊,其实是web pack的一些配置文件,咱们以后呢,也不会去碰这里。那所以说咱们这里写一下子build的文件夹。在这个文件这样式的吧,哎,在这个文件夹的内部啊,有一个叫index.js,它是什么呀,它是一个web pack的一个配置文件。对不,那当然咱们程序员很少,哎,很少去修改这个文件。啊,这是他。那以及咱们再往底下看一下子看这那这儿呢,有一个墨文件夹。对不,其实默你们不应该啊,不熟悉了,因为在咱们前面的时候,咱们是不是讲过呀,对不啊,其实这个呢,就是关于谁,关于默数据的文件夹。
05:11
对吧,那咱们呢,稍微看一下子。因为他这块在干什么,是不是在模拟,哎,模拟一些假的,哎数据。利用的谁是ma GS实现了?对吧,咱们当年在前台项目当中也写过默克数据。对吧,那你看这不就是有inex.GS吗。对,不引入相应的模块,以及帮你去募一些假的数据。OK吧,那当然咱们在开发的时候啊,那用的都是真实的数据,所以说这个咱们可以不用去看对吧?哎,因为咱们,哎实际开发的时候。开发的时候用的,哎,利用的是。哎,真实的接口,所以说这个Mo GS Mo文件夹里面,咱们完全没必要去看了。
06:05
好吧,指它以及还有一个叫node modules文件夹,那这个不应该没收,叫node model。那这里面放的是咱们项目所有依赖的模块。对吧,啊,就是项目依赖的模块。啊,都在这里对吧。好,那之后咱们再看还有个谁叫public文件夹。那咱们呢,也写一下。Papa。Lake。对吧,Pob l,那这个文件夹里面啊,放了什么呀,是不是放了一个ion icon图标啊图标。对吧,以及还有一个静态页面。对吧,那静态页面咱们不应该陌生,因为VE开发的就是单页面应用啊。对吧,一般开发的是单页面用,但是像这个no script的没用的就可以给他干掉,对吧,你看这是不是有挂载点。
07:02
那这块呢,要注意一件事,什么事,就是public文件夹里面啊,经常,哎,经常。放置一些静态的资源。而且在项目打包的时候,Web pack啊,不会编译这个编译。哎,编译这个文件夹对吧,原封不动。原封啊不动的打包到Dis文件夹里。对吧,指他。好,那咱们再看看还有谁src,那src这里面就不用过多去说了,那这个一定是最重要的了,对吧,Src。那咱们也做一下笔记,Src那一句话,程序员。对吧,原代码的地方。那咱们稍微看一下它里面的这个结构啊,你看到之后其实不应该陌生,因为有很多东西你都见过。
08:06
对吧,比如说咱们看一下API对吧,它这里面呢,有一个叫做API文件夹。对吧,那这个文件夹一定是涉及到什么,是不是涉及到请求相关的。对吧,你像咱们前台项目当中,是不是经常把一些请求相关的啊涉及。哎,涉及到涉及到请求的时候,放到API里面。他这里面请求啊,写了俩,一个叫table,一个叫user,那咱随便点进去看一下子。你看这它这里是不是对外暴露了一个函数,叫做get list。对不,那以及它引入了一个叫request,其实咱们在前台项目的时候,Asus的二次封装对外暴露的是不是也叫request?对不,那就说将来在某一个组件或者是在其他的地方,一引入这个函数,是不是可以通过A设发请求?
09:03
对吧?哎,比如说get的请求啊,地址啊,以及parama,所以这个不要陌生,而你看一下的,它的as放在了哪,是不放在了yous下的这个request这里,看到这吧,他不是在这引的吗。而咱们当年as的二次封装就是放在API里面。对吧,其实它这个放在哪个位置知道没关系,但是你要找到它对吧,这不这个吗,一定是关于as的。对吧,这明显是,呃,请求想要拦截器嘛。那当然,这还有谁叫user?User是关于用户的啊,你看比如说他有登录的接口,对吧,获取用户信息,退出登录,其实这三个在咱们前台项目当中咱也写过。对吧,那这块呢,老师呢,做一下笔记,看这他在引入什么。他是不是在引入as,对不括弧这个as进行了什么二次的封装?
10:00
对吧,那以及看这这是在干什么,是不是对外。哎,对外暴露暴露啥登录的接口函数。对吧,咱当年也写过登录啊,获取用户信息啊,拿着ton获取用户信息啊,对吧。那这是什么?是不是对外暴露获取用户信息的函数,那以及这里是不是也有,也有个什么叫退出登录。对吧,哎,对外。暴露退出登录的函数。对吧,那将来一定是在别的地方会用到。对吧,这是它API以及A文件夹a size文件夹里面是放的是不是一些静态资源。对吧,那这块老师呢,也给他写一下叫ass文件夹。它的里面啊,哎,里面放置了一些静态资源,而这些静态资源呢,一般是咋的共享的。而且还要注意放在a size文件夹里面的静态资源。
11:08
在web pack打包的时候,Web pack呢会进行编译。对不,那当然它这里面只是放了一个啥,这不只是放了一张图片404的嘛。对吧,哎,放了两张404。那一集啊,还有components文件夹,Comp,呃,文件夹里面又放了三个文件夹对吧,其实就是三个组件,面包屑对吧?Bread啊,汉堡包啊,以及SVG对吧?那这里面咱们也做一下笔记。走啊啊,这这个少少了个字对吧,编译那这块呢,咱们也标记一下,在src下还有个叫comts comments文件夹。那这个咱们应该知道,一般放置的是非路由组件。或者是全局组线。
12:01
对吧,那当然这是它用到的一些组件啊,这里面咱们到时候用到的时候再去详细的去翻一下子,这几个组件是用来干什么的。对吧,啊,这是它,咱们先把它大概的结构先给它探索,以及icons里面放了一些什么,放了一些是不是矢量图,对吧?SVG矢量图。那这里面咱们也写一下吧,还有一个文件夹叫icons,那么这个文件夹。对吧,文件夹到里面。那么放置了一些SVG矢量图。对吧,那以及咱们再往底下看看啊,再往底下看看,在底下这儿还有叫layout。对不?哎,还有一个叫layout文件夹lay。Out文件夹。这个文件夹咱们先看,首先说它这有一个index view啊,对外暴露了一个啥,说暴露了一个组件。
13:01
对不,这应该是没问题的,以及你再看再点去它也是相应的组件。对吧,你看是不是全是点view啊,所以它这里面放了一些组件啊,以及这你看还有个谁叫混入。对不对,混入咱也说过,是不是所有的组件,诶GS东西啊,相同的地方可以封装为一个混入。对不就是GS行为一样的,是不是可以封装成一个汇入引入进来。对吧,所以说layout这块老师说一下layout文件夹。那实验上啊,它里面哎,放置了一些组件与啊,还有个啥是不是叫混入。对不哎,先把它的里边大概的先看一下。以及这儿还有路由。当然,它这里边有个叫router rou router文件夹。那这个咱们应该知道是与谁相关,是不是与路由相关的。
14:00
对吧,这个路由啊,咱们的稍微的去看一下子。看这啊,老师呢,先把没用的地呢,先给它折上。稍微看一下。那虽然说引入vuee。引入will router插件,使用路由插件,以及引入了你看啊看这。他在陆游。当中是不是在引这个组件,引这个layout组件。对不?你看引的是谁,是不是就是layout下的view,是不是就是一个组件,看这。At-lay out,那不就是引的是他吗?引了一个组件对不?那以及再看这。这是对外暴露了一个常量,叫呃,常量路由constant router路由嘛,里面放的是啥?你可以看一下子。是个数组,数组里面是不是就是路由的信息了。比如说有登录404啊首页对吧,还有其他配置的一些路由。
15:00
对吧,所以这块呢,是跟路由相关的一个数组,那当然你得咋的啊,你再看这它是不是还对外,你比如对外对外暴露了一个箭头函数。而且这个箭头函数一执行,会返回一个路由器对象。对不,而且这块你得认识啊,Sc a sc behavior,滚动行为Y等于零,这玩意咱见过。对,不是不是可以让咱们滚动条距离顶上是不是零。对吧,以及把所有的路由是不是进行注册。对吧,其实这块的写法跟咱以前写的不一样啊,稍微有点不一样,就是把root之所有的路由信息是放在了这个常量里边一竖包着。对不,以及它的外层啊,放了一个呃,常量,而且是一个函数,一知行才会返回这个路由器对象。对吧,等到咱们讲讲谁讲路由啊,就是讲这个权限相关的时候,咱们呢,还会回手详细的看一下这个路由信息。
16:01
对,不但你大概得看懂,也就是说这个函数一执行,会返回一个路由器的实例的一个对象,而且呃呃,滚动性为Y等于零,以及配置的相关路由是不是也配置好了。现在在这儿你大概都能看懂对吧,以及对外暴露这个路由器。对吧,那当然它这还写了一个函数,这个函数至于干什么,咱们现在可以先不用管,对吧,其实也也很简单,就是重置路由。对吧,但是这咱们先可以先不用管这一块呢,你大概得看懂。就相当于咱们以前写的时候是怎么写,是这么写,你有一个他。对不对,直接X port直接对外暴露,但是他现在的写法是放了一个常量。对吧,哎,常量是个啥,是个函数,函数一直进行返回,那也是一样。对不,这不一样的,以及对外暴露,所以这块是关于路由相关的。以及死道,那死道这咱就不用说了,那死道是啥是不我相关于vor的对吧,叫store对吧,这个文件夹。
17:06
那这个呢,一定是。与VE差相关。对吧,哎,相关的,那咱们呢,可以点进去稍微看一下。那首先说你看这儿熟不熟悉。对不对,你看它也,它也是分模块式开发,引了三个模块,APP setting和user,对不,以及统一的对外暴露一个仓库,以及把所有的gets计算属性嘛。对吧?哎,把gets也引进来了,对吧?他很聪明,把这三个模块是不是放在Mo文件夹每一个里面,是不是一个模块就相当state mutation action,对吧?但是你发现它没有get。Gets呢,它都是放在一起的,这三个模块都放在一起了,对外暴露了,完在这儿引入的对吧,所以他还是比较聪明的。这他那以及还有style style就是写的是萨斯样式,对不是跟样式相关的,那咱们也写一下子。
18:06
就是这个style,哎,文件夹这是与与谁与样式相关的。哎,相关的。那以及咱们再往底下看us放一些啊实用性工具。这里面呢,主要咱说的是谁,是request这块得注意。它呢,是as的二次封装,而且这块东西你不应该陌生。对吧,创建实例。对不请求拦截器,响应拦截器,而且这里面他也用到了谁用到了这个,这个我记得好像是有没有用到那个进度条。啊,进度条看一下它没有对吧,但是你要注意这块是不是请求跟响应拦截器。而且你看这条代码你应该见过,是不是在给服务器携带token。对不对,对吧,所以说这一块呢,老师呢,也给他呃,写一下子就是哪个文件叫u us us。
19:04
文件夹。文件夹这里面呢,要注意有一个叫2EQ request.js是谁,是as的二次。封装的文件。需要注意的地儿啊,老师都给你说一下子,这个文件你需要记住了,因为咱以后经常用,当然它有一些其他已经写好的一些文件,比如说看这。这个你不应该没收。对不?咱当年也写过。对吧,获取token,设置token,移除token直播,咱当年用的是本地存储,它用的是cookie,用到的一个模块叫GS cookie啊,用它去搞cookie更简单一些。对不,那以及还有一些其他的一些配置文件,对不啊,当然这里面它还有谁,还有这个,还有这个,呃,Va data对不VE对吧?哎,Va还记得吧,表单验证的,咱前来说过。
20:00
指他以及还有views文件夹。这个老师也写一下子这块呢,有个叫做views文件夹,那这个文件夹里面,哎,放置的市场是不是路由组件。对吧,路由组件。那路由主页咱们先看它现在有几个啊,这个是首页,但是报的是首页。以及form login啊,什么ne table,你看一下子。不就这几个吗?对吧,Dashboard。完了之后放,当然登录登录,咱是不是已经登录进来了,以及其他的模块在这里都有。对吧,所以这里面放的都是路由组件相关的,那以及APP点,那咱也说一下子吧,这个其实没什么可说的了,对吧,APP。点will。那这个呢,一句话跟主见。跟组件这里面,他也他也没什么可玩的,对吧,就放了一个root view路由组件出口的地方。对吧,以及命点GS入口文件。
21:00
是吧,面点GS这是啥入口文件。入口文件。那以及啊,还有这个叫呃。Per p开头的这个这个文件,其实这个文件咱们看看干了一件什么事啊。虽然说引入路由,引入仓库啊,以及引入饿了么UI当中的message以及进度条,这个咱用过。对吧,当然它的样式得有。以及获取到token,对吧?啊,以及进度条的一些设置,你看这块代码真的很熟悉。你看这。这张代码呢?咱当年写过这块代码,你可不能陌生判断有没有偷看。对吧,有token代表已经登录了,你登录了,如果你还去啥,去log in。能去吗?不能,对不对。诶,对不对,对吧,那否则呢,该放行放行对吧,但是在放行之前看一下用户有没有信息,有信息放行,没信息发请求获取用户信息再放行。
22:04
以及token过期。对吧,这些咱都做过,以及看这以及未登录的一些判断。对不,而且这个操作咱以前做过。对吧,所以说咱们写一下子这块呢,还有个文件叫P。哎,嗯,MIS ion.js跟谁相关,是不是与。与啊,这个导航。首位相关。对不,那以前还有个settinging啊,塞ing这样的一个设置文件,这个文件还挺好玩的,你看它对外暴露了一个对象,这有个叫title,你看这个title其实就是谁,就这。你看吧,就这。咱可以改个名字,比如说咱改的什么叫做后台管理系统。对吧。哎,叫做后台管理系统。那咱们保存一下,那你看这里的title有没有变,是不是有变了。
23:02
看了吧,以及看这这呢叫faced hide是否固定这个头部。哪儿呢,其实说的是哪呢,就是这。就是这儿。这块固不固定对吧,你看咱试一下,假如说你写个处。所以说他这个封装还是很好用的处,那咱们保存一下,你看一下子走。刷新看一下。你要是不是就固定在这儿对吧,那你改为放,那就是不固定。对吧,所以你这边改那边就跟着变化。这回你再看对吧,那以前还是这这叫Li bar logo侧边栏的logo是否显示,那现在是false,那咱给他改个处,那你看一下子左侧的这个sli bar是有logo的。啊,那当然咱们不需要给他改成啥,改成放。所以说它这还有个文件叫settinging啊,Settings这个呢,是一些配置啊配置项。
24:05
或者叫项的配置项文件。好,那以及呢,老师呢,在这儿呢,就给你合上了这个文件夹,那以及test这里这里面呢,是当年潘嘉诚所做的一些测试性文件,那这里面呢,咱们就不看了,对吧,因为咱们也嗯不想去看他的一些测试文件了,对吧,测试文件里面就是他写的一些测试功能。好吧,那以及看这那像底下的这些啊,都是配置文件了。对吧,底下的这些都是配置文件,但老师呢,也稍微说一下。所以看这这里是不是有个叫点啊I con这个呢是编程风格的一个配置文件,举个例子,就比如说你缩进占多少个空格,是占两还是占一个,你可以自己设置,但是这个文件咱们很少去碰。对吧,以及看这以及这三个文件要注意。
25:00
这仨文件。这个老师说一下这仨文件需要注意一个叫点env。哎,Env.dev MT还有个叫点PR啊env。点pro。主要是这两个键,还有底下这个。这两个文件是谁的文件呢?是web关于web pack的一些配置文件。那首先说它这个,它这个是开发环境的配置文件。这个是上线环境下的配置文件,这个是测试环境下的配置文件。那么webpad在打包的时候,在运行的时候,它可以检测到你当前运行的环境是什么。是开发环境,生产环境还是测试环境,它是可以检测到的。那么每个文件里面的,你看他这块的是不是都对外暴露了一些东西。对不看这比如说叫VE杠,P杠,Base-API这边写的叫反斜杠,什么什么de,呃呃de-API。
26:08
但是你要注意这三个文件是什么?是web派可以监测到的三个开发环境。你到底是,哎,你到底是开发环境,生产环境还是测试环境,它可以监测到的。举个例子,你看这三个文件里面的这些数据,咱们可以通过web pack对外暴露的一个东西可以拿到,就是谁呢?Process就是通过它。呃呃,叫pro就是它。它呢是web派提供的一个变量,咱们可以刷新看一下。你看它对外暴露的是一个对象,这个对象的身上啊,有个叫env的属性,看看是不是有叫V,哎,你可以打点env。打点ENV对吧,可以拿到你当前的环境。对吧,比如说现在是开发环境是不是可以拿到,而且你在这个文件里面所写的什么,诶所写的这些,呃,设置的东西都可以拿到。
27:11
但是他一定是以vuee-APP开头的,比如这块人后面又加了一个词说后缀,但是一定要注意,一定是以vuee-APP开头的。什么base API对不?View base API对不,什么什么base API对不,他可以拿到看嘛。是不是可以通过process,因为是不是可以拿到。对吧,就拿到这里面的数据了。对吧,而且这个文件在在一些地儿会用的,你看咱们可以找一下子,比如找一下咱们那个请求拦截器,这。我记得他这里就用到了,你看吧。对不对。也就是说,咱们的娃娃派可以监测到当前是什么环境。对不对。对不对,完了拿到相应的你那个参数对吧,其实这块咱们应该知道,就是as的base URL,咱当年写的是不是反斜杠。
28:02
对不,那说白了这块可以干什么,就是这块是不是可以决定你的base URL是什么。对吧,这块一定要理解。对吧,好,这是它,那以及咱们再看一下子底下还有谁呢?还有这个叫ES Li的忽略文件啊,就是ES Li的校验的时候忽略哪些文件。对吧,那以及还有什么ES Li的一些配置文件,这个咱们就很少动了。那以及这这是这是不是get的忽略文件,这都是一些配置文件啊,咱们很少去碰见了。一看这,这是不是有个叫以点YML结尾的,这里面可以看到的一些语言,以及一些开发环境的版本都可以看到,这个咱们也很少去碰。以及还背的配置文件,这个配置文件其实咱们在很早以前碰过。对吧,应该是在讲饿了么UI按需,呃,加载的时候应该见过这是背的配置文件。以及GST测试框架的配置文件。
29:03
其实GST啊,这块你看有个英文叫GST,其实有一个测试的一个小框架叫GST,这是那个测试框架的一些配置文件,咱们也很少去碰。当然这个你就应该很熟悉了,这是src的别名的文件。对不?哎,以及版权声明的一些文件,那这个咱更很少碰了,那还有谁拍点杰森。这个文件里面可以看到咱们项目的一些,呃,比如说名字啊,版本号啊,以及运行的一些依赖啊,这里面都可以看到。那以及还有什么,呃,Post css.com.js,这个呢,是与CSS相关的。其实你看这这我不知道你们熟不熟悉对吧,一定要注意这个配置文件是跟CSS相关的,咱当年学CSS转rem不就用到了这个文件啊,对吧,那当然那这块它代表的是什么含义啊,就是不同的,就比如说flex。啊,第一次play fly是不是有兼容问题对吧,在不同的浏览器前面是不是要加上浏览器啊前缀啊,那它就可以解决这个问题。
30:05
对吧,所以这个是跟CSS相关的配置文件,咱们也很少去碰那以及还有一些说明性的文件。是吧,当然最后还有一个就是we点点JS文件,你可以把它当做就是挖派点点JS。对吧,而这个文件咱们不应该陌生,像解决代理跨域啥的,咱们经常碰这个文件。所以说这是咱们这个模板的一个基本结构的一个简介。好吧。
我来说两句