minihuabei的博客

4 集成测试 4.1 需求分析 本次集成测试的目的如下： 1、测试课程发布与CMS接口是否正常。 2、测试课程发布与ES接口是否正常。 3、测试课程从创建到发布的整个过程。 4.2 准备环境 1、启动MySQL、MongoDB 2、启动ElasticSearch、RabbitMQ 3、启动Eureka Server 4、启动CMS、课程管理服务、搜索服务。 5、启动Nginx、系统管理前端、教学管理前端、Nuxt.js。 启动logstash，注意-f 访问http://www.xu

3.5 按难度等级搜索 3.5.1 需求分析 用户选择不同的课程难度等级去搜索课程。 3.5.2 API方法 使用 search_course方法完成搜索。 3.5.3页面 按难度等级搜索思路如下： 1）点击难度等级立即更改路由。 2）通过监听路由，路由更改则立即执行search搜索方法。 按难度等级搜索页面代码如下： <ul> <li>难度等级：</li> <li v‐if="grade!=''"> <nuxt‐link class="title‐l

3.4 按分类搜索 3.4.1 需求分析 1、通过一级分类搜索 2、选择一级分类后将显示下属的二级分类 3、选择二分类进行搜索 4、选择一级分类的全部则表示没有按照分类搜索 5、选择一级分类的全部时二级分类不显示 3.4.2 API方法 课程分类将通过页面静态化的方式写入静态资源下，通过/category/category.json可访问，通过 www.xuecheng.com/static/category/category.json即可访问。 nginx.conf文件代码如下 location /st

3.2.5 页面 在页面中展示课程列表。 <div class="content‐list"> <div class="recom‐item" v‐for="(course, index) in courselist"> <nuxt‐link :to="'/course/detail/'+course.id+'.html'" target="_blank"> <div v‐if="course.pic"> <p><img :src="imgU

3.2 查询全部 3.2.1 需求分析 初次进入页面，没有输入任何查询条件，默认查询全部课程，分页显示。 启动搜索服务 启动 ElasticSearch服务 测试接口通了就行了 3.2.2 API方法 在api目录创建本工程所用的api方法类，api方法类使用了public.js等一些抽取类： /api/public.js-------------抽取axios 的基础方法 /api/util.js-----------------工具类 /config/sysConfig.js----系统配置类

3 搜索前端开发 3.1 搜索页面 3.1.1 需求分析 上图是课程搜索前端的界面，用户通过前端向服务端发起搜索请求，搜索功能包括： 1、界面默认查询所有课程，并分页显示 2、通过一级分类和二分类搜索课程，选择一级分类后将显示下属的二级分类 3、通过关键字搜索课程 4、通过课程等级搜索课程 3.1.2 页面布局 nuxt.js将/layout/default.vue作为所有页面的默认布局，通常布局包括：页头、内容区、页尾 default.vue内容如下： <template> <d

3.6.2 async /await方法 使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果。 1、先测试异步调用，增加a、b两个方法，并在mounted中调用。 <template> <div> 修改用户信息{{id}},名称：{{name}} </div> </template> <script> export default{ layo

3.6 获取数据 3.6.1 asyncData 方法 Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法， asyncData 方法会在组件（限于页面组件）每次加载 之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的 上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法 返回的数据一并返回给当前组件。 注意：由于 asyncData 方法是在组

3.4 路由 3.4.1 基础路由 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 Nuxt.js根据pages的目录结构及页面名称定义规范来生成路由，下边是一个基础路由的例子： 假设 pages 的目录结构如下： pages/ ‐‐| user/ ‐‐‐‐‐| index.vue ‐‐‐‐‐| one.vue 那么，Nuxt.js 自动生成的路由配置如下： router: { routes: [ { name: 'user', path: '/user', c

3.3 页面布局 页面布局就是页面内容的整体结构，通过在layouts目录下添加布局文件来实现。在layouts 根目录下的所有文件都 属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。 一个例子： 1、定义：layouts/test.vue布局文件，如下： 注意：布局文件中一定要加 组件用于显示页面内容。 <template> <div> <div>这里是头</div> <nuxt/> <

3 Nuxt.js基本使用 3.1 创建Nuxt工程 nuxt.js有标准的目录结构，官方提供了模板工程，可以模板工程快速创建nuxt项目。 模板工程地址：https://github.com/nuxt-community/starter-template/archive/master.zip 本项目提供基于Nuxt.js的封装工程，基于此封装工程开发搜索前端，见“资料”–》xc-ui-pc-portal.zip，解压 xc-ui-pc-portal.zip到本项目前端工程目录下。 本前端工程属于门户的一部