登录模块：
1.在使用bootstrap之前要引入bootStrap的js和css文件 然后用里面已经写好的Overview控件 将他复制到login文件下的index.html
注意要满足dom结构，外面要有个div来包着这个Overview控件，且根据要求在这个控件上面加个h2展示标题
2.更改bootstrap-Overview控件默认的文本 并且修改相应的id值 让他有实议 加上required必选属性，把不要的一些组件信息删掉
3.给外层div容器添加一个logincontainer属性值，写好样式 利用sass生成css文件 控制整个控件的样式和位置。
4.给form表单一个id值，在js文件中根据这个id值获得节点控制器，对这个节点也就是form绑定提交事件，首先需要先用evt.preventDefault()
阻止默认行为   fetch方法后面跟匹配的数据username password来获取数据  如果username.value   password.value 后台是有的就打印出数组 
没有就是空数组
5.if判断获取的数据后端里有没有 没有就报错  有就跳转页面到后台的首页
6.报错的div一开始要隐藏 然后获得数据的时候如果res.length<0时，也就是失败时就显示出来  利用loginwarning.style.display
7.将获得的数据通过赋值给token通过location.setitem存在本地存储中，注意得出来的是一个数组对象，要存在本地需要通过
JSON.stringify解析  最好通过...res[0]进行一个展开数据 然后将password赋值为***覆盖密码
8.在home---index.html中 如果有token值就停留，没有token值就回到登录页面，这样的目的是实现退出功能

页面的布局
1.在home下的index.html用一个大div里面包裹topbar和boxdiv将页面分成三部分  导航栏---topbar 主页（主页有侧边栏还有主要内容）---box 
在home下新建一个scss文件用来放样式，整体使用弹性盒布局 让他在竖直方向排列  且让他的导航栏固定，box里放一个bootstrap的grid组件
设置好左右比例 topbar里放一个bootstrap的Navbar组件，修改里面的文本内容
2.利用bootstrap的现成导航组件 将这个现成组件单独放在一个文件下（conponent-topbar---index.html） 将对应的js也放在相应的文件下（utli---js
放在共用的文件conponent   util下  在js文件下用fetch获得topbar-html的内容，然后then出来res 赋值给
topbar节点下的内容，然后在home-index引入这个文件就行。

导航栏
1.为了使得依赖不乱 重名不怕 私密不漏  就使用模块化写法 设置一个load方法这个方法就是用来渲染topbar节点下的内容的 ，实现渲染topbar内容
首先定义一个islogin方法用来获取我们之前存的token值，然后在load方法中先把这个获得的token值赋给一个变量user，判断user是否为空
不为空就获得topbar组件，然后定义一个renderTopbar方法动态渲染这个组件的内容，形参是user 实参是islogin获得的也就是user 
在renderTopbar方法里，先获得组件里控件的节点控制权，然后对这些控件进行赋值，控件有图片 用户名 还有为exit定义点击事件
点击就会移出token值，跳转到登录页面，把要用的方法导出到home---index.js 然后在index.html引入index.js，如果user为空就跳回到登录页面。
3.这里属于注意顺序问题 需要先等待获得到数据在渲染。

侧边栏
1.从bootstrap中拿两个现成的组件个将其放在单独的sidemenu---index.html中，然后改动成自己预期的样式
2.在后台调试找到要更改的样式，将样式写在 sidemenu---index.html 中 别怕这样写会错 这里把sidemenu---index.html
当做一段待引入的文本而已，注意要修改组件的id值和文本内容和样式，让其符合我们的预期
3.在Loadview.js文件中通过fetch方法获得侧边栏index.html的文本，然后选中home-index.html的侧边栏附有sidemenu属性
的节点，对这个节点进行赋上我们上一步获得的侧边栏的内容。
4.为组件的四个选上加上id，dom获得某个选项的id并且设置他的color为蓝色 这里的id不能写死。
5.为了实现展示哪一页哪一页的侧边栏就是蓝色，就需要把这个load方法导出去，并且这个方法必须带id这一个形参
然后在每一个模块的index.js中引入load方法 调用load方法且带实参 这个时候实参js四个选项的id值，这样就实现效果了

赋：：： 由于公共的部分可以一起使用 我们可以把home---index.scss复制到style.scss 然后在导入scss就行
因为sass支出导入sass  但是导入的时候记得要有 \ 而且是两个实现转义  而不是/ 

创建news-manage(createnews newslist)   users-namage(addusers  userlist)   想home下的文件全部复制给他们四个
然后设置好他们的js文件和scss文件    sidemenu的index.html下的四个选项设置好要href跳转的地址

首页模块
1.使用bootstrap的面包屑组件放在home下的index.html的主要信息部分，用一个div包着然后配置好样式  父元素设置padding  自己也设置padding 
实现好看的间隔效果
2.下面放置个人信息，创建首页个人信息首先得先获取登录员的信息 然后在利用innerHTML渲染上去   在LoadView.js中 isLogin()方法得到了登录员的数据了
使用模块化写法 导出isLogin 在home-index.js 导入isLogin   得到的数据通过json.parse解析送给user 然后获得个人信息div节点的操作
然后通过innerHTMl进行渲染数据 渲染图片 用户名 用户介绍。
3.设置数据的样式 弹性盒 让他们在图片右边 左边距为50px 调整纵轴为主轴  然后内容主轴居中显示

添加用户模块
1.拿home下的面包屑结构来用  放在addusers的html首页部分处  记得属性值要一样的，有两个值一个是
用户管理一个是添加用户 这样实现了面包屑结构。
2.拿login中用到的表单放在addusers的首页里，不要的就删除 要的就留下 顺便更改下form表单的id值为
addUserForm ，其他控件的id也要修改， 新加textarea 和 file 控件 分别赋给他们id 通过这两步就把页面渲染好了
3.为添加用户按钮绑定事件 打印出输入的值，要想图片打印出来，需要转成base64格式
首先阻止默认事件，通过 FileReader生成一个对象 然后通过readAsDataUrl方法把图片转成base64格式
4.一开始让photo为全局变量空，在点击图片后就把图片信息赋值给photo
5.给添加用户的form表单设置上onsubmit事件，提交事件要阻止默认行为，通过异步和fecth，把我们输入的数据添加到指定的url中，
然后跳转到userlist---index.html
6.在LoadView.js中 if判断如果user接口的role不为admin 就删除用户管理这一功能，这样普通管理员就不能增改管理员信息 。
实现这一功能的代码可以往外提，然后在里面调用就可以

用户列表模块
1.使用bootstrap下的tables组件放在listnews下的index.html下的主要内容处。修改他的内容，头部信息固定，组件的body部分动态创建
2.动态创建 --- 在userlist的js文件下，设置一个render方法，这个方法里先获取后台数据，然后通过给body用innerHTML渲染页面
里面的信息不能写死，要用es6模版 里面放用户名 图片 还有bootstrap组件的两个按钮，注意超级管理员的信息不能编辑和删除
所以给管理员的后台信息设置上一个特别的变量 default 值为true 然后通过三目选择符如果为true就disabled 为空就不禁用

编辑按钮模块（弹出modal，里面要有预留内容）
1.在bootstrap中找到modal组件 放在userlist下的index.html，修改组件的id值 还有文本的内容，
文本内容里面放入从adduesr--index.html复制过来的form表单 实例化modal 通过modal的toggle方法显示出来
2.为编辑按钮设置上一个自定义的属性，这个自定义属性值为i项目的id值，为了区别点击编辑的是哪一个用户信息，
通过事件对象evt.target.dataset.myid方法获得id值将其赋值给全局变量updateId,然后获得的用户信息list利用filter
方法过滤我们要的用户信息
3. 进行数据的结构进行数组预填，我们要的信息有username password introduction photo  
如果点击的是编辑按钮，就获取form表单控件的结点，对这些结点进行赋值 当然图片也要进行base64转换
4.为编辑按钮设置上一个id，通过id为编辑按钮设置点击事件，涉及到异步，所以要用async  await
通过fetch的PATCH方法更改预填的内容（主要id不要写死）这样id通过evt.target.dataset.myid也就是updataId获得
5.fetch过后then获得数据结果，利用PATCH，将要修改的内容修改，然后modal的toggle方法退去modal框
6.为了使编辑好修改的内容能够马上显示，需要render 重新渲染

删除按钮模块
1.在bootstrap中找到modal组件 放在userlist下的index.html，修改组件的id值 还有文本的内容
2.在js文件中实例化这个modal框，在listbody对应的表单方法里，判断如果为删除按钮，就togggle一下
把modal框弹出来，同时把得到的id赋值给updateId，为了后面区别删的是谁
2.给删除按钮设置自定义属性 ，为了区别删除的是某条新闻的内容，同时为modal框的确定按钮设置上id
3.为删除按钮设置点击事件，涉及到异步，所以要用async  await，利用fetch--delete方法删除用户信息
注意id不要写死，id指向要删除的某条用户的信息
4.利用modal的toggle方法，将modal框给显示出来，确定删除后重新render页面。

创建新闻模块
1.往Createnews的index.html中放置一个bootstrap的面包屑和一个bootstrap的form表单 form表单还有一个botstrap的select组件
修改组件的id值，实现添加新闻的页面渲染 
2.内容部分设置一个富编辑器，通过wangEditor网站用一个现成的编辑器，按照他的步骤。引入相关的文件和代码
这样就实现了整体的页面渲染，第一步1.引入wangeditor的css和style内容 第二步定义HTML结构 可以修改id值 
第三步：引入js创建编辑器
3.给封面图片转为base64格式，代码复用用户管理的index.js中的就行  让图片为全局变量
4.给form表单绑定提交事件，注意id的变化，涉及到异步，所以要用async  await，利用fetch--post方法
将数据提交到后台接口news   ，这个接口需要自己创建   ，这里作者的信息也要加上，由于LoadView.js的login（）
方法拿到的是用户的信息，所以作者信息可以由islogin().username得到 注意要json解析，注意富编辑框的内容通过getHTML获取
赋给了html  所以把html赋给content就好
5.点击提交后location.href跳转到新闻列表页面

新闻列表模块
1.新闻列表和用户列表相似，可以复用用户列表的bootstrap组件，里面有面包屑组件还有table组件
修改他们的提示信息就可以
2.给body部分设置一个id index.js文件中，设置一个render事件，用到异步的方法和fetch  
将获得的数据赋值给list 然后对list进行映射给body部分  并且设置上三个按钮，每个按钮都有设置上对应的class属性
和自定义的属性的id值
3.注意只有本用户发布的内容才能查看到，需要通过isLogin获得用户的username数据，在fetch的后面
加上username实现筛选，在进行一个映射

预览按钮模块
1.设置上一个bootstrap的modal，配置好相应的id和文本内容，使用这个modal需要再js文件先实例化这个modal，然后事件委托给预览按钮
使用modal的toggle方法，实现弹出modal，当然了可以调整modal窗口的大小
2.filter过滤出想要的预览的用户的信息，通过自定义属性的id值来进行过滤  这是重点 要给预览按钮设置上自定义属性值
3.设置一个render方法  render过滤出来的用户的信息
4.给标题和文章内容的标签设置上id值，通过id.innerHTML的方法渲染页面 
5.最后把文章内容的img 设置上宽度为百分百，让图片不要溢出来。

更新按钮模块：
1.点击更新按钮后的modal框和Createnew类似，所以我们这边直接复制createnews文件，将他命名为editnews
把editnews的文本和id改一改，实现渲染页面。
2.判断点击的是更新按钮后，就跳转到editnews下的index.html 注意要带上id  这样是为了区别
点击的是谁，得到的是谁的数据。因为给这个更新按钮设置了自定义属性指向的id，所以加上这个id
进行筛选就行。
3.获得id值 有两种方式  我使用了let updateId = new URL(location.href).searchParams.get("id")
4.为表单设置一个提交事件，利用fetch的PATCH方法修改新闻的内容，点击更新新闻按钮后就跳转到新闻列表。
5.为表单设置一个render方法  用fetch获得指定id的用户的数据信息进行数据结构后然后对modal页面进行渲染
title 和 category比较好获得，但是内容就需要用到富编辑框的setHtml方法进行一个设置
5.给content 和 cover 附上原本值 分别为mycontent mycover （这里用了别名避免命名冲突）
这样的目的是为了防止没有改变content和cover时，导致他们为空（因为一开始这两个初始化为空）
这样 title category content cover 附上值之后就实现了modal的预填
6.为editnews下的表单设置一个提交事件，使用fetch的PATCH方法修改内容  cover非require
然后点击创建新闻实现了内容的更新

删除按钮模块
1.往newsList的index.html 放modal  这个modal和userList下的index.html一样，所以拿来复用就行
修改他的id值和文本提示。
2.js文件下判断如果点击的是删除按钮，就让他的updateId赋值为点击的用户的id 通过用上modal
的toggle方法，显示modal框  注意给删除按钮设置上自定义属性的id值，这样的目的是为了区别点击
删除的是谁。
3.为删除按钮添加点击事件，用到async await  ，利用fetch的delete方法删除用户信息 然后进行
modal的toggle，让modal框消失，最后重新渲染页面。

数据分析模块
1.访问echarts图表库 下载dist/echarts.js 在home的index.html中引入echarts.js 
按照文档步骤提示，第二步加入一个div 在个人信息的下面，记得不要在里面
第三步 js文件中添加js代码 ，里面的提示内容可以修改，这样就添加了一个图表
2.找到我们想要的图表，复杂里面的options代码块到js的option代码块，实现图表替换，修改里面的文本
3.将我们发布的新闻进行同类分类，通过islogin()得到后台数据，定义一个analyst方法，用上fetch方法，
记得跟上author，为了标识是谁发的，这样就可以得到author下发布的新闻的篇数。
4.利用lodash里面现成的分类方法进行新闻分类 ，lodash是一个js实用工具库
首先下载lodash.js文件  在index.html中引入这个文件，引入之后 ， _  就相当于是个全局的变量了
然后_.groupBy进行新闻分类，第一个参数是源数据，第二个参数通过回调函数筛选出category值
这样就可以通过category实现新闻分类了。
5.然后将新闻的数据弄给data指定的数组的格式  进行一个for遍历  让空数组arr里面添加name  value
记得要是数组格式，可以先定义一个数组 通过for in遍历给每一项赋值，然后将其得到的data给lodash的options里面的
data，形参为data  实参为arr。
6.设置一个renderEcharts方法 渲染新闻分类出来的新闻  跟个实参arr  实参随意设个data

普通用户---导航栏
1.复用admin下的文件 到新建的web文件下，去掉不需要的部分，比如newsmanage
user-manage   sidemenu  echarts lodash  留下topbar  修改product下的index.html 把不是
导航栏部分的删掉 修改scss文件 把不是修饰topbar的删掉   js文件先不传入id值让他高亮显示 ，也不需要引入islogin
loadview.js导出load 把load方法留下，其他的方法删掉

2.复制一个news文件和product文件一样的，导入bootstrap中符合导航栏样式的组件到topbar下的index.html
 修改文本值 给li下面的选项附上id值 登录页面不用id值 还有href附上要跳转页面的地址。
在news和product文件下的js文件中，load方法中要设置上选中的id对应的字体颜色，填上调用load方法需要的id值，让他高亮显示 

普通用户 --- 产品与服务模块
1.加入一个轮播功能的组件 ，在bootstrap中找到就行，当然也可以用swipe来做轮播效果
2.删除里面多余的内容，为了使得图片变好看，最好实现div里面内嵌style实现图片的美观。
3.在db中弄一个文件，文件里放几张要用的图片，启动了json-server之后，这个路径就相当于静态文件
通过  http://localhost:3000/1.jpg 就可以直接访问图片
4.json-server模拟一个后端接口products，里面放些数据
5.在js文件中，设置渲染方法  先通过fetch获得后台数据，然后动态创建指示器和slide
动态创建指示器时通过map映射时，data-bs-slide-to  和  aria-label 不能写死，通过es6模版来写
动态创建slide时通过map映射，注意第一个div要加active  url  h5 p不能写死  
6.再次render渲染页面

普通用户---新闻搜索模块
1.往box内容部分放置一个背景图片，设置好样式，在往里面放置一个bootstrap的模糊搜查框(floating labels)还有一个
List group组件 设置好样式  设置好位置。
2.为模糊搜索宽定义一个input事件，先判断是否有内容，没有内容就display为none return出来
有内容就显示list-group这个组件
3.fetch得到后台的news数据后面?title_like=""是json-server提供的模糊查询的方法
4.得到的数据之后进行一个innerHTML渲染映射在List-group上

普通用户---新闻分类模块
1.在bootstrap中找到  card  对应的组件 放在news---index.html下 用一个div属性为cardcintainer装 
修饰这个card组件
2.获得这个div的节点，对这个节点进行innerHTML渲染，把最新的四个进行渲染，进行一个映射，映射到card
组件中，内容不能写死。注意给每一个card设置上自定义的属性id值，为了区别点击的是谁。
3.for of迭代，为每一个card设置上一个点击事件，点击后跳转到相应的详情页面，注意跟上获得的自定义id值
4.引入bootstrap下的Navs and tabs组件，放在cardcontainer下的div内，修改这个组件的id和文本值，标题可以写死
内容不能写死。
5.引入loadview.js文件 利用里面的_.groupBy()方法进行新闻分类，第一个为原数据，第二个为回调函数，根据category
进行分类。
6.为每一个div对应的tab进行一个foreach遍历，对item进行页面渲染，用上一个问号，避免没有数据进行item映射
导致出错。
4.对渲染的内容进行样式设置

普通用户---新闻详情模块
1.复制new下的index.html 留下他的box和topbar  把不要的内容删除 复制news下的index.js
的导航栏部分，其他不要 ，复制index.scss 把不要的删掉，这样就渲染了详情页面的导航栏部分
2.在box下放内容，为了展示   title author  newscontent
3.在js文件中进行render渲染，首先获得某条新闻的id，通过fetch方法后面跟个id来获取某条新闻的
数据
4.对数据进行解构，把title  author  content进行赋值，然后重新渲染页面