weixin_47673864的博客

这次项目实训，我们组做的是risc-v学习平台，我们前面几周的总体任务是熟悉环境，做一些简单的功能，比如登录以及页面的搭建等等，了解最基本的需求，环境的安装配置，对相关知识的学习，由于我负责的是前端，所以进行的是VUE的学习。与组长进行进一步的需求定位，确立最后的需求，并继续进行VUE的学习。进行完需求确认后，我们组确认了我们的最终需求，我是设计编写web端的页面，而我负责的是前端，继续学习vue的使用以及element-ui的使用，并开始着手编写登陆页面，仿照教学视频大体写完了一个登陆页面，样式如下登陆界

使用ElementUI提供的MessageBox弹框组件中的“确认消息”，来实现对话框：其中“this.$confirm”就是用来弹出确认对话框的（这里需要先为VUE的原型对象挂载confirm函数），通过“.then”来指定确认之后的操作，通过“.catch”来指定用户取消之后的操作。下面我们先为组件绑定confirm函数，我们在plugins/element.js下，引用“MessageBox”组件：需要传递要删除的用户ID即可。下面我们在刚刚的confirm对话框的“.then”中添加删

实现用户列表的分页效果。我们要在用户数据列表的左下方加入一个分页组件Element-UI为我们提供了“Pagination分页”组件，我们选择功能最全的分页组件： 样例代码如下：“@size-change”指定的是切换“每页显示xx条”的时候触发的方法；“@current-change”即只要页码值发生了变化，就会触发该属性的方法；“current-page”显示当前的页数；“page-sizes”是“每页显示xx条”的选择框；“page-size”是当前选中的每页多少条；“layout”指我们需要的

页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（）在

看一下后台的API接口，我们这次用到的是“用户数据列表”接口，查询参数有三个，分别是“查询参数”，“当前页码”和“每页显示条数”：回到Users.vue组件，在script区域完善一下逻辑结构，新增data数据区、生命周期函数created以及methods方法区：用户列表数据请求需要在生命周期函数created中执行methods区定义“getUsersList”函数，然后将请求的对象先在data区域封装好，使用之前我们用axios封装好的$http进行服务请求，使用解构函数将返回的对象封装在

需要将该内容重定向到一个欢迎页面，而不是主框架home的一个div需要定义一个“welcome”组件，然后在home组件的“Main”的位置，放置一个路由占位符，然后“welcome”的路由，设置为home组件的子路由，以此来显示“welcome”组件的内容。在路由配置文件router/index.js中，配置Welcome组件的路由信息：定义完路由规则后，我们在home组件中为“Main”区域添加路由占位符：将每一个二级菜单修改为路由链接即可。复杂一点的方法是为每一个菜单添加“router-l

整个主页分为三大块，最上面是横向的系统标题和操作设置区域，左侧是菜单区域，右侧是主体功能页面显示区域。完成这样一个首页的布局，我们要用到Elemenet-UI中的下列组件：：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。：顶栏容器。：侧边栏容器。：主要区域容器。：底栏容器。大致的页面布局效果：将需要使用的组...

我们需要先进行项目的初始化，前端项目初始化的步骤如下：①安装Vue脚手架脚手架可以帮我们否建项目结构。②通过Vue脚手架创建项目通过脚手架生成项目结构。③配置Vue路由安装和配置路由工具。④配置Element-UI组件库安装饿了么的Vue组件库，它提供了很多前端样式和功能。⑤配置axios库配置该库来实现网络服务访问。使用Vue前，我们要完成node.js的安装，以及vue-cil脚手架的安装通过脚手架创建项目有很多种方式，比较经典的就是在cmd控制台中，使用“vue init webpack