前端组件 | 易学教程

SpringMVC工作原理

阅读更多关于 SpringMVC工作原理

一：SpringMVC的工作原理图二：SpringMVC流程用户发送请求至前端控制器DispatcherServlet。 DispatcherServlet收到请求调用HandlerMapping处理器映射器。处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)，生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherServlet。 DispatcherServlet调用HandlerAdapter处理器适配器。 HandlerAdapter经过适配调用具体的处理器(Controller，也叫后端控制器)。 Controller执行完成返回ModelAndView。 HandlerAdapter将controller执行结果ModelAndView返回给DispatcherServlet。 DispatcherServlet将ModelAndView传给ViewReslover视图解析器。 ViewReslover解析后返回具体View。 DispatcherServlet根据View进行渲染视图（即将模型数据填充至视图中）。 DispatcherServlet响应用户。三：组件说明以下组件通常使用框架提供实现： DispatcherServlet：作为前端控制器，整个流程控制的中心，控制其它组件执行，统一调度，降低组件之间的耦合性

05 vue项目01-组件关系、bootstrap

阅读更多关于 05 vue项目01-组件关系、bootstrap

1、django后端项目 1、项目预期配置前端静态资源页面展示 2、django项目代码主url from django.contrib import admin from django.urls import path,include from app01 import urls urlpatterns = [ path('admin/', admin.site.urls), # url分发 path('api/v1/', include('app01.urls'), name="app01"), ] View Code url from django.urls import path,include from .views import CommentViewSet urlpatterns = [ # url分发 path('comments/',CommentViewSet.as_view()), ] view from rest_framework.views import APIView from rest_framework.response import Response data = [ {"markdown": "##vue初认识", "title": "day1 vue学习", "content": "vue初认识"}, {"markdown": "

vue.js（16）--vue的组件

阅读更多关于 vue.js（16）--vue的组件

注册一个全局组件 <div id="app"> <test></test> </div> <script> // 注册全局组件 Vue.component('test', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script> 创建一个局部组件（只能在父模板中使用） <div id="app"> <test></test> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } new Vue({ el: '#app', components: { 'test': Child } }) </script> 组件化和模块化的区别：模块化是从后台代码逻辑角度出发，方便代码分层开发，保证每个功能模块的职能单一组件化是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用 <body> <div class="app"> <my-com1></my-com1> <my-com2></my-com2> <my-com3></my-com3> <my-com4></my-com4> <mycom5></mycom5>  </div> <template

学习前端框架【Vue.js】

阅读更多关于学习前端框架【Vue.js】

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，但可以与第三方库或既有项目整合。尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。尝试 Vue.js 可以创建一个 .html 文件，然后通过如下方式引入 Vue：  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者：  <script src="https://cdn.jsdelivr.net/npm/vue"></script> 学习视频： https://scrimba.com/playlist/pXKqta 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: {

前端VUE笔记

阅读更多关于前端VUE笔记

vue 杂记脚手架 console.log() 控制台打印输出和 alert()差不多 !important 设置 Css优先级最高 display : flex ; < div style =" flex: 1;" /> < /div> 设置水平状态下 div 占的宽度比 <style scoped> 设置作用域只限于目前页面插值 < template >写法 < div v-once > {{ su }} </ div > 当标签中带 v-once 时插值处的内容不会更新，但会影响其他节点上的数据绑定 < input type ="button" @click =" insert " value ="点击" > computed: 计算属性 < template >写法 < div > age+a={{ addToA }} </ div > 在 methods: 中 computed : { addToA : function (){ return this . age + this . a }, data: 中 a : 0 , ref数据绑定 < template > < input type ="text" ref ="name" ></ input > < input type ="button" @click =" insert " > methods : {

Django-DRF组件学习-预备知识

阅读更多关于 Django-DRF组件学习-预备知识

1.web开发应用模式在开发Web应用中，有两种应用模式： 1.1 前后端不分离所谓的前后端不分离，就是前后端数据都在同一个服务器中，前端的样式以及页面渲染都由后端一次性渲染出来在前端浏览器中展示出来。 1.2 前后端分离所谓的前后端分离，就是前端数据在单独的一个服务器中，前端浏览器先行请求前端样式文件然后根据前端样式的请求在向后端请求特定的数据即可，这样不在像以前安卓，IOS以及web浏览需要分别都需要自己的后端服务器，这样多个客户端只要请求统一的API接口，即可请求到指定的数据。节省后端开发的压力。 2.API接口 2.1 API接口分类为了在团队内部形成共识、防止个人习惯差异引起的混乱，我们需要找到一种大家都觉得很好的接口实现规范，而且这种规范能够让后端写的接口，用途一目了然，减少双方之间的合作成本。目前市面上大部分公司开发人员使用的接口服务架构主要有：restful、rpc。 rpc: 翻译成中文:远程过程调用[远程服务调用]. http://www.lufei.com/api post请求 action=get_all_student&params=301&sex=1 接口多了,对应函数名和参数就多了,前端在请求api接口时,就会比较难找.容易出现重复的接口 restful: 翻译成中文: 资源状态转换. 把后端所有的数据/文件都看成资源. 那么接口请求数据

vue.js初识(一)

阅读更多关于 vue.js初识(一)

一什么是vue? Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。---vue.js官网对于vue,相信就算不了解vue的话，也听说过vue的名字,作为去年上升势头最猛烈的前端框架，能在短时间内赢得大量的关注，我觉得了解学习一下是很有必要的。官网： https://cn.vuejs.org/index.html github: https://github.com/vuejs/vue 官方的长篇大论我就不再赘述了，说下我对vue的理解，首先他是一个js框架，也可以看作是“轻量”的前端渐进式框架。我觉得vue最显著、最重要，也是最特殊的一个地方，就是“轻量”，在越来越重视前端体验以及组件化模块化的思想下，像往常一样比较复杂臃肿的前端应用逐渐变得轻量、简洁、实用。前端经历了这几年的快速发展，各种框架工具类层出不穷，在摒弃了很多以往旧的开发模式之下，可以迅速开发、降低学习成本、可以迅速迭代成为了vue现在接受程度比较高的原因之一。二 vue的特点 2.1 双向绑定当然

vue的基础使用

阅读更多关于 vue的基础使用

vue的介绍前端框架和库的区别 nodejs的简单使用 vue的起步指令系统组件的使用过滤器的使用 watch和computed 钩子函数渐进式的JavaScript框架 vue react angualr 作者:尤雨溪 facebook 谷歌公司文档:中文建议:如果你想学好vue 1.看视频初步的了解vue 2.学vue的课时刻看官网文档 https://cn.vuejs.org/ 前端框架和库的区别功能上的不同 jquery库：包含DOM(操作DOM)+请求，就是一块功能。 art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板跟python的模板类似) 框架：大而全的概念，简易的DOM体验+请求处理+模板引擎在KFC的世界里，库就是一个小套餐，框架就是全家桶。代码上的不同一般使用库的代码，是调用某个函数或者直接使用抛出来的对象，我们自己处理库中的代码。一般使用框架，其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。框架的使用初始化自身的一些行为执行你所编写的代码释放一些资源 nodejs 去官网https://nodejs.org/en/download/ 下载安装(傻瓜式安装) 打开终端 cmd : 执行 node -v 如果出现版本号，证明安装node成功，跟安装python雷同

vue学习-day04（路由）

阅读更多关于 vue学习-day04（路由）

目录： 1. 组件传值-父组件向子组件传值和data与props的区别 2. 组件传值-子组件通过事件调用向父组件传值 3. 案例：发表评论。使用ref获取DOM元素和组件引用 4. 路由-前端路由和后端路由的概念 5. 路由-vue-router的基本使用 6. 路由-路由redirect重定向的使用 7. 路由-设置选中路由高亮的两种方式 8. 路由-为路由切换启动动画 9. 路由传参-使用query方式传递参数 10. 路由传参-使用params方式传递路由参数 11. 路由-使用children属性实现路由嵌套 12. 路由-使用命名视图实现经典布局 1. 组件传值-父组件向子组件传值和data与props的区别 <--返回目录　　父组件向子组件传值 <!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">  <script type="text/javascript" src="vue2.js"><

Vue实例

阅读更多关于 Vue实例

1绑定事件指令 v-on <button v-on:click="num++">点击1</button> <button @click="num++">点击2</button> <button @click="countSum()">点击3</button> <button @click="countSum">点击4</button> <button @click="say('今天天气好冷了')">点击5</button> <script> new Vue({ el:"#app", data:{ num:0 }, methods:{ countSum(){ this.num = this.num + 1 }, say(msg){ console.log(msg); } } }) </script> 2 计算属性作用:可以代替的复杂的表达式比如下面: <div id="app"> {{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}} {{birth1}} {{getBirth1()}} </div> <script> new Vue({ el:"#app", data:{ num:0, birthday:1529032123201 }, methods:{ getBirth1(){

订阅前端组件