vue实战京东金融 1 项目设计与原理分析

项目设计与原理分析

环境及知识准备

运行环境
构建环境
编辑器
基础知识

业务开发流程

技术选型

构建工具
MVVM框架选择
模块化设计
自适应方案设计
代码维护及复用性设计的思考

业务开发
测试验证
发布上线

工程构建安装
项目设计与原理分析

css模块化设计

设计原则
设计方法

代码书写
js组件设计

设计原则
设计方法

自适应

基本概念
工作原理

SPA（单页面）设计

设计意义
工作原理
写代码

构建工具
上线指导

环境及知识准备

运行环境

Node 8.9.1 建议使用nvm来管理Node版本
- windows版本 https://github.com/coreybutler/nvm-windows
- mac版本 https://github.com/creationix/nvm#install-script
Git 简易基础文档： http://www.bootcss.com/p/git-guide/
Chrome 最新浏览器 v62+

使用nvm，打开命令行工具：

查看当前的node版本：nvm ls
安装所需的node版本：nvm install 8.9.1
如果安装了其他高级的版本，可以：nvm use 8.9.1

构建环境

webpack 3.10.0 文档： https://doc.webpack-china.org/
npm scripts 文档： https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
babel 文档： https://babeljs.cn/docs/usage/polyfill/ http://www.imooc.com/article/21866

编辑器

Atom https://atom.io/
ESLint 文档： http://eslint.cn/docs/user-guide/configuring

基础知识

ES6 http://es6-features.org/#Constants
Sass Http://sass.bootcss.com/
Vue.js https://cn.vuejs.org/

业务开发流程

技术选型

构建工具

构建工具有哪些
gulp（流式文件，任务管理）、grunt（频繁写文件，任务管理）、webpack（打包）、fis（百度内部集成的方案）、prepack（fackbok推出的代码优化方案，没有dom、bom）、rollup（可以去掉冗余代码）
为什么要构建工具
资源压缩（js、css、图片）静态资源替换模块化处理编译处理（es6）
我们用哪个构建工具
webpack（打包）、npm scripts（任务管理）

MVVM框架选择

看团队、看作者对框架的投入程度、对框架原理的理解

vue（纯前端）
angular（如果团队人员是后端转前端的较多）
react

模块化设计

css模块化设计
js模块化设计

自适应方案设计

代码维护及复用性设计的思考

需求变更
产品迭代
Bug定位
新功能开发

业务开发

测试验证

发布上线

工程构建安装

下载代码 git clone [email protected]:cucygh/JDFinance.git
安装调式
- cd JDFinance
- npm install
- 切换分支 git checkout setup
- 启动服务 npm start
测试验证
- 是不是安装正确
- ESlint是不是能检查代码格式
- 是不是能编译vue、es6
- 是不是能编译scss、css
- 修改代码后浏览器能不能自动刷新
- css模块化是不是正确

项目设计与原理分析

css模块化设计

设计原则

可复用能继承要完整
周期性迭代
优秀的代码是模仿出来的
优秀的代码时设计出来的
优秀的代码时重构出来的

设计方法

先整体后部分再颗粒化
先抽象在具体

代码书写

在app下面建css/layout.scss和element.scss

layout.scss
使用flex布局：

@charset "UTF-8";

@mixin flex($direction:column,$inline:block) {
//如果$inline是block,display为flex,否则为inline-flex
  display: if($inline==block,flex,inline-flex);
  //$direction指定方向
  flex-direction: $direction;
  flex-wrap: wrap;
}

element.scss
先引入需要的模块：

@import "./layout.scss";
//按钮样式
@mixin btn($size:14px,$color:#fff,$bgcolor:#F04752,$padding:5px,$radius:5px) {
  padding: $padding;
  background-color: $bgcolor;
  border-radius: $radius;
  border: 1px solid $bgcolor;//边框和背景色一样
  font-size: $size;
  color: $color;
  text-align: center;
  line-height: 1;
  display: inline-block;
}
//列表，横向？纵向？
@mixin list($direction:column) {
  @include flex($direction);
}
//面板样式
@mixin panel($bgcolor:#fff,$padding:0,$margin:20px 0,$height:112px,$txtPadding:0 32px,$color:#333,$fontSize:32px) {
  background: $bgcolor;
  padding: $padding;
  margin: $margin;
  >h4{
    height: $height;
    line-height: $height;
    padding: $txtPadding;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    color: $color;
    font-size: $fontSize
  }
}

js组件设计

设计原则

高内聚低耦合
周期性迭代

设计方法

先整体后部分再颗粒化
尽可能的抽象

自适应

基本概念

css像素、逻辑像素、设备像素(真是物理像素)、设备像素比 https://github.com/jawil/blog/issues/21
viewport

<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">

width：控制viewport的大小，可以指定的一个值，如 600，或者特殊的值，如device-width 为设备的宽度（单位为缩放为100%时的css像素）
height：和width相对应，指定高度
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

viewport分几类：layout viewport（蓝色的大图）、visual viewport （裁剪出来的中间的部分）、idu viewport（手机的宽高）
上面那句代码就是让蓝色大图的大小和visual viewport一样大，铺满手机屏幕

rem：根据html跟标签计算的
利用viewport和设备像素比调整基准像素

工作原理

利用viewport和设备像素比调整基准像素
利用px2rem自动转换css单位

SPA（单页面）设计

设计意义

前后端分离
减轻服务器压力
增强用户体验
Prerender预渲染优化SEO 文档： https://love.fishman.wang/2016/05/06/prerender预渲染优化SEO/

工作原理

History API 实现方式：更加优雅，对浏览器有要求
要有打开动作：从入口打开某个页面
要有历史记录单：前进后退怎么实现
pushState：创建历史记录
onpopstate：响应浏览器前进后退，及控制事件
Hash 实现方式：兼容性好
当改变地址时去修改hash，然后监听hashchange事件

写代码

创建一个新分支：git checkout -b router

成功创建新分支，并切换到新分支

History方式：


<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Testtitle>
    <style media="screen">
    	html a{
			color: blue;
			cursor:pointer;
			margin:20px 10px;
		}
    style>
  head>
  <body>
    <article id="app">article>
	//创建入口
	<a class="api a">a.htmla>
	<a class="api b">b.htmla>
	<script type="text/javascript">
		//注册路由
		document.querySelectorAll('.api').forEach(item=>{
			item.addEventListener('click',(e)=>{
				e.preventDefault();//清除默认事件
				let link=item.textContent;
				//做一些动作。。。如打开页面等
				//通过History去创建历史记录
				window.history.pushState({name:'api'},link,link);
				//可以接受三个参数，第一个参数：页面之间传递的参数；第二个参数：页面要显示的title；第三个参数：真实的地址
			})
		})
		//监听路由
		window.addEventListener('popstate',(e)=>{//点击后退前进才会触发popstate事件
			console.log({
				location:localtion.href,
				state:e.state
			})
		})
	script>
  body>
html>

启动服务，测试代码：npm start

点击a.html时，地址栏把a.html加进去了
点击b.html时，地址栏把b.html加进去了
点击返回l时，地址栏把a.html#加进去了，同时把数据返回了；
点击a.html和b.html没有触发，点击后退前进才会触发popstate事件

Hash 方式：

	<h3>Hashh3>
	//创建入口
    <a class="hash a">#a.htmla>
    <a class="hash b">#b.htmla>
    <script type="text/javascript">
		//注册路由
		document.querySelectorAll('.hash').forEach(item=>{
			item.addEventListener('click',(e)=>{
				e.preventDefault();//清除默认事件
				let link=item.textContent;
				//做一些动作。。。如打开页面等
				location.hash = link;
				})
		})
		//监听路由
		window.addEventListener('hashchange',(e)=>{//点击后退前进才会触发
			console.log({
				location:localtion.href,
				hash:location.hash
			})
		})
	script>

测试：

点击#a.html，每次点击都会触发hashchange事件
点击#b.html，每次点击都会触发hashchange事件
点击后退，事件仍会被触发

构建工具

上线指导

你可能感兴趣的:(vue)

v-for 实例琪33
v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
npm 搭建 Vite 项目渺小的虫子 viter 前端 javascript 开发语言
兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
vue 通信方式 hx_1199 vue.js 前端
1、props和$emit父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:['
VUE 页面禁止缩放（华为平板浏览器可能失效）唐屁屁儿 JS vue webview javascript
h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
Vue 常见面试题(一) 安生生申面试题 vue.js 前端 javascript
目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
react native 总结一切顺势而行 react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
Vue 模版编译原理 I will.874 vue.js javascript 前端
当我们使用Vue编写完一个组件以后，Vue会根据模版编译一个render函数，调用render函数生成虚拟DOM，然后将虚拟DOM映射成真实DOM当数据发生变化时，Vue会触发更新视图，调用render函数返回新的虚拟DOM，对比新旧虚拟DOM，修改真实DOM，从而更新页面在此期间，有以下4个关键步骤：模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染，根据虚拟DOM生成
reactive和ref的异同、toRef和toRefs的使用 Niucode vue3 vue.js 前端 javascript
一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
vue 在style标签中引入js变量控制样式古迪红尘 VUE vue.js javascript 前端
1.基本的绑定样式示例data(){return{colorData:'blue',}}详细用法可参考下面的博客：https://www.jianshu.com/p/2b82ee1e6199
Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js 前端 javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
vue生命周期涡看你就不是好人呐 vue.js javascript 前端
1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa
Vue 发送Ajax请求多种方式 Red丶哞前端 vue.js ajax 前端
1.发送ajax请求的方式方案一：jq的ajax（在vue中不推荐同时使用）方案二：js原始官方fetch方法方案三：axios第三方2.方案一后端视图函数fromrest_framework.viewsetsimportViewSetfromrest_framework.responseimportResponseclassIndex(ViewSet):defindex(self,request
vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战 vue.js 前端 javascript
一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
vue3中使用过渡动画transition 前端小趴菜05 css
//appear表示一进入页面就使用动画hello.slide-enter-active,//进入动画的生效状态.slide-leave-active{//离开动画的生效状态transition:all0.5sease;}.slide-enter-from,//进入动画开始状态.slide-leave-to{//离开动画结束状态height:0px!important;}.slide-enter-
blog-engine-06-pelican 静态网站生成支持 markdown 和 reST 语法老马啸西风 java
拓展阅读blog-engine-01-常见博客引擎jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman对比blog-engine-02-通过博客引擎jekyll构建githubpages博客实战笔记blog-engine-02-博客引擎jekyll-jekyll博客引擎介绍blog-engine-02-博客引擎jekyll-jekyl
在Vue中组件和组件之间的通信有哪些？ qingyun989 vue.js
1.父向子传数据？props2.子向父传数据？第一种方式：父向子传一个函数，子接收这个函数，然后子去调用这个函数，通过这个函数向子传数据第二种方式：组件的自定义事件绑定事件：负责接收数据触发事件：负责发送数据3.可以完成所有组件之间的数据，包括：兄弟之间、爷孙之间、但不限于这些全局事件总线4.怎么选择呢？父向子：props子向父：自定义事件其他的关系使用全局事件总线
mineadmin使用docker启动方式 qq_38812523 docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
vue-pdf 预览pdf (数据流) reembarkation vue.js pdf javascript
页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat
js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口（本文以vue项目为例）祝你今天也快乐 js vue javascript vue.js 小程序
1.封装一个js文件msgSdk.js注意：需要修改这个请求地址apiServiceAddress;(function(){if(window.msgSdk){return}varmsgSdk=(function(){varm_msgSdk=thisvarapiServiceAddress="http://172.12.14.5:8000"this.I_SendHTTPRequest=functi
【Vue】elementUI-MessageBox组件相关 SZnA1 vue.js elementui 前端
官方代码：点击打开MessageBoxexportdefault{methods:{open(){this.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$message({type:'success',message:'
基于nodejs+vue智慧农业小程序python-flask-django-php QQ_1963288475 python vue.js 小程序 flask django php node.js
根据此问题，研发一套智慧农业小程序，既能够大大提高信息的检索、变更与维护的工作效率，也能够方便微信小程序的管理运用，从而减少信息管理成本，提高效率。该微信小程序主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、知识科普、土壤信息、水质信息、购物商城等功能。该微信小程序操作简便，界面设计简洁，不但可以基本满足本行业的日常管理工作，同时又可以有效减少人员成本和时间成本，为智慧农业管理工
nodejs+vue的街道办管理系统python-flask-django-php QQ_1963288475 python vue.js flask django php node.js
在此基础上，结合现有街道办管理体系的特点，运用新技术，构建了以nodejs为基础的街道办管理信息化管理体系。首先，以需求为依据，根据需求分析结果进行了系统的设计，并将其划分为管理员和用户二种角色和多个主要模块：用户、住户信息、流动人口、住户居住、住户迁出、缴费信息、投诉维修理、处理信息、评价评分、核酸采样、预约信息等。使用目前市场主流的技术express框架进行项目构建，基于MVC开发模式，使用n
vue动态获取本地图片浅墨_东 vue.js javascript 前端
最近在复习插槽有关知识的时候，遇到一个问题。我想把本地图片动态的展示到页面上，却实现不了。后来搜索了很多有关这方面的知识，才得到了解决。展示错误情况（一）直接使用相对路径importChildfrom'./components/child.vue'exportdefault{data(){return{list:[{name:'小明',avatar:'@/assets/剑士.jpg'},{name
vue3 + Element + nodejs 大文件上传、断点续传 ZL随心 vue.js 前端 javascript
前言大文件上传，一般时间都比较长，这么长的时间内，可能会出现各种各样的问题，比如断网，一旦出错，我们的文件就需要重新上传，这样造成资源浪费，如果我们使用了断点续传继续就不会造成资源浪费了，因为当出现错误的时候，我们再重新上传文件，就会从我们出现错误的地方开始上传了，对于出错前上传的内容就不用再上传了，对于已经上传过的文件，就可以实现秒传的效果了。完整仓库地址流程1、上传方法constonUploa
如何快速上手Vue框架? 山间漫步人生路 vue.js 前端框架 vue.js
要快速上手Vue框架，可以按照以下步骤进行：一、准备工作了解Vue：Vue是一个构建用户界面的渐进式框架，核心库只关注视图层。环境准备：安装Node.js和npm，这是Vue开发的基础环境。二、安装Vue全局安装VueCLI：使用npm全局安装VueCLI，它是一个基于Vue.js进行快速开发的完整系统。npminstall-g@vue/cli三、创建Vue项目使用VueCLI创建新项目：vuec
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题百思不得小李 JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
vue项目报错，npm install 报错 m87里的光 vue.js npm 前端
1.报错问题：npmERR!cb()nevercalled!npmERR!Thisisanerrorwithnpmitself.Pleasereportthiserrorat:npmERR!9npmERR!Acompletelogofthisruncanbefoundin:npmERR!C:\Users\AdministratorAppDataRoamingnpm-cachelogs2020-12
统一思想认识永夜-极光思想
1.统一思想认识的基础,才能有的放矢原因: 总有一种描述事物的方式最贴近本质,最容易让人理解. 如何让教育更轻松,在于找到最适合学生的方式. 难点在于,如何模拟对方的思维基础选择合适的方式. &
Joda Time使用笔记 bylijinnan java joda time
Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法： /** * DateTime变化（增减） */ @Tes
FileUtils API eksliang FileUtils FileUtils API
转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。
各种新兴技术不懂事的小屁孩技术
1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。现在构建系统常用到maven工具，现在有更容易上手的gradle，搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
tomcat6的https双向认证酷的飞上天空 tomcat6
1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
托管虚拟桌面市场势不可挡蓝儿唯美
用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
spring学习——xml文件的配置 a-john spring
在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
HDU 4342 History repeat itself 模拟 aijuans 模拟
来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
java中最常用jar包的用途 asia007 java
java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法. w
ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法百合不是茶 js json编码返回异常
一:ajax获取自定义Struts框架中的json编码出现以下问题: 1,强制flush输出 json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面却没有跳转到错误页面 3, ajax中的dataType的json 改为text 会
JUnit使用的设计模式 bijian1013 java 设计模式 JUnit
JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。
Linux常用命令（摘录） sunjing crond chkconfig
chkconfig --list 查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080 查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量安装编译器 yum install -y gcc
【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
Anychart图表系列五之事件监听白糖_ chart
创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
Web前端相关段子 braveCS web前端
Web标准：结构、样式和行为分离使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
编程之美-24点游戏 bylijinnan 编程之美
import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
主页面子页面传值总结 chengxuyuancsdn 总结
1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
[网络与经济]互联网+的含义 comsci 互联网+
互联网+后面是一个人的名字 = 网络控制系统互联网+你的名字 = 网络个人数据库每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
oracle 创建视图 with check option daizj 视图 view oralce
我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。然后我们来看一下视图包含的结果： select * from testv
ToastPlugin插件在cordova3.3下使用 dibov Cordova
自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。 ToastPlugin.java package&nbs
C语言22个系统函数 dcj3sjt126com c function
C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
开发一个类的流程 dcj3sjt126com 开发
本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
java 并发 shuizhaosi888 java 并发
能够写出高伸缩性的并发是一门艺术在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
Spring Security（11）——匿名认证 234390216 Spring Security ROLE_ANNOYMOUS 匿名
匿名认证目录 1.1 配置 1.2 AuthenticationTrustResolver 对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajax nodejs express
一、前言通过上节学习，我们已经 ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务及 mongodb的存取，但写着写着，web端就
在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks java html struts checkbox
第一种方法：获取结果String类型在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。以下是实现的代码：前台 HTML 代码：
003.Kafka基本概念 nweiren hadoop kafka
Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：消息源（Message）的分类。 Partition： Topic物理上的分组，一
Linux环境下安装JDK roadrunners jdk linux
1、准备工作创建JDK的安装目录： mkdir -p /usr/java/ 下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html 把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
Linux忘记root密码的解决思路 tomcat_oracle linux
1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除　　例如: 　　ro
跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonp jquery 框架 UI html5
postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他