day02 CMS前端开发
关注
分享
扫一扫
文章平均质量分 58
day02 CMS前端开发
feng_fly_28
这个作者很懒，什么都没留下…
展开
-
24-CMS前端页面查询开发-使用钩子方法实现立即查询
目前实现的功能是进入页面点击查询按钮向服务端表求查询，实际的需求是进入页面立即查询。如何实现？这要用到vue的钩子函数，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、 编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。通常使用最多的是created和mounted两个钩子：created：vue实例已创建但是DOM元素还没有渲染生成。 mounted：原创 2021-01-22 13:56:09 · 168 阅读 · 0 评论 -
22-CMS前端页面查询开发-Api调用-跨域解决
跨域问题解决测试 上边的代理 ，结果 报错如下 ：No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:11000’ is therefore not allowed access.原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。解决：采用proxyTable解决。proxyTable是什么？vue-cli提供的解决v原创 2021-01-21 17:58:54 · 386 阅读 · 0 评论 -
20-CMS前端页面查询开发-页面原型-页面内容完善
页面内容完善启动java的cms项目打开swagger复制结果集的列表数据，放入page_list.vue<template> <div> <el-button type="primary" size="small">查询</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column原创 2021-01-21 15:41:27 · 286 阅读 · 0 评论 -
19-CMS前端页面查询开发-页面原型-Table组件测试
Element-UI介绍本项目使用Element-UI来构建界面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组 件库。Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installationTable组件测试本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看Element-UI库，我们需要Table 表 格、Form表单 及Pagination 分页组件。 进入Element原创 2021-01-21 11:07:43 · 189 阅读 · 0 评论 -
18-CMS前端页面查询开发-页面原型-创建页面和定义路由
页面结构在model目录创建 cms模块的目录结构在page目录新建page_list.vue，扩展名为.vue。.vue文件的结构如下：<template> <!‐‐编写页面静态部分，即view部分‐‐> <div>测试页面显示... </div></template> <script> /*编写页面静态部分，即model及vm部分。*/ </script> <style> /*编写页面样式，不原创 2021-01-21 10:17:48 · 194 阅读 · 0 评论 -
16-CMS前端工程创建-导入系统管理前端工程
2.1 导入系统管理前端工程CMS系统使用Vue-cli脚手架创建， Vue-cli是Vue官方提供的快速构建单页应用的脚手架，github地址： https://github.com/vuejs/vue-cli（有兴趣的同学可以参考官方指导使用vue-cli创建前端工程），本项目对Vue-cli 创建的工程进行二次封装，下边介绍CMS工程的情况。查看上篇文档了解Vue-Cli脚手架2.2.1 工程结构如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装，导入课程资料中提供Vue-原创 2021-01-20 16:51:39 · 219 阅读 · 0 评论 -
15-使用vue-cli（vue脚手架）快速搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。1. 避坑前言其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个报错：在网上查了很多资料才发现原来是node版本过低的问题，虽然没有找到官方对这个“过低”问题的解释，但是根据国外网友的经验之谈，应该是至少使用node6，我将node4更新至node8之后确实没有报错了，顺利搭建。相关答疑帖：https://github.com/v转载 2021-01-20 16:18:51 · 72 阅读 · 0 评论 -
15-webpack研究-webpack-dev-server-程序调试
1、在webpack.config.js中配置： devtool: 'eval‐source‐map', 在js中跟踪代码的位置上添加debugger一个例子：在add方法中添加debuggervar add = function (x, y) { debugger return x+y;}刷新页面，点击计算，直接已经下了断点，可以调试...原创 2021-01-20 16:01:56 · 165 阅读 · 0 评论 -
14-webpack研究-webpack-dev-server
创建webpacktest02文件夹创建vue_02文件注意：代码里不要一句js代码，删除引入外部js的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><div id="app"> <a v-bi原创 2021-01-20 15:51:36 · 323 阅读 · 0 评论 -
13-webpack研究-webpack入门程序
创建webpacktest01文件夹创建vue_02.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><!--实现在body区域显示一个传智播客名称--><div id="app">原创 2021-01-20 14:44:24 · 72 阅读 · 0 评论 -
12-webpack研究-webpack安装
1、连网安装webpack安装分为本地安装和全局安装： 本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。 全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个 项目。全局安装需要添加 -g 参数。进入webpacktest测试目录目录，运行：1）本地安装：只在我的项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会 将webpack的js包下载原创 2021-01-20 14:12:27 · 87 阅读 · 0 评论 -
11-webpack研究-npm和cnpm安装配置
安装webpack步骤1.Webpack依赖node.js,首先安装node.js2.安装npmnpm全称Node Package Manager，他是node包管理和分发的工具。node.js使用npm安装我们所依赖的js包通过npm安装Webpack当安装完node.js会自动安装npmnpm的工作原理：去远程下载所依赖的js包查看nmp默认包下载到哪里设置包路径包路径就是npm从远程下载的js包所存放的路径。 这样不用占用c盘空间npm config set prefix "E原创 2021-01-19 17:51:34 · 162 阅读 · 0 评论 -
10-webpack研究-安装nodejs
1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/推荐下载LTS版本，本教程安装9.4.0。2、选安装目录进行安装默认即可安装完成检查PATH环境变量是否设置了node.js的路径。3、测试在命令提示符下输入命令node -v会显示当前node的版本...原创 2021-01-19 17:01:55 · 166 阅读 · 0 评论 -
08-vuejs研究-vuejs基础-v-if和v-for指令
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><!--实现在body区域显示一个传智播客名称--><div id="app"> <!--相当于MVVM的view视图-->原创 2021-01-19 14:43:53 · 115 阅读 · 0 评论 -
07-vuejs研究-vuejs基础-v-bind指令
v-bind1、作用：v‐bind可以将数据对象绑定在dom的任意属性中。v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class2、举例： <img v‐bind:src="imageSrc"> <div v‐bind:style="{ fontSize: size + 'px' }"></div> 3、缩写形式<img :src="imageSrc"> &原创 2021-01-19 14:28:43 · 83 阅读 · 0 评论 -
day02 CMS前端开发-vue-v-on
创建vue_02.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><!--实现在body区域显示一个传智播客名称--><div id="app"> <!--相当于MVVM的view原创 2021-01-19 14:16:11 · 91 阅读 · 0 评论 -
day02 CMS前端开发-vue-v-text
创建vue_02_2.html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><!--实现在body区域显示一个传智播客名称--><div id="app"> {{name}} <原创 2021-01-19 14:10:45 · 94 阅读 · 0 评论 -
day02 CMS前端开发-vue-v-model
创建vue_02_1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js常用指令的测试</title></head><body><!--实现在body区域显示一个传智播客名称--><div id="app"> <input type="te原创 2021-01-19 11:42:02 · 105 阅读 · 0 评论 -
03-vuejs研究-vuejs基础-入门程序
创建vuetest文件夹复制vue.min.js创建vue_01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js测试程序</title> <script src="vue.min.js"></script></head><body><原创 2021-01-19 11:20:18 · 63 阅读 · 0 评论