使用Vuex实现一个笔记应用的方法

最近开始着手学习 Vue，先大略的过了一遍官方文档，跟着敲过一部分官方文档中的 DEMO，然而还是不甚了了。在网上找到了一个入门的笔记应用，即便是入门级的应用，在学习途中依旧困难重重。特将学习作此笔记，方便今后回看，也希望能够帮到刚开始学习 Vue 的女同学

附原作者 Github 链接：https://github.com/lichenbuliren/vuex-notes-app2

预期目标

笔记具备如下基本功能
1.新增
2.删除
3.收藏
4.在全部笔记和收藏笔记间切换
5.在当前列表中进行搜索

卖家秀

买家秀

准备工作

1.新建项目

选个文件夹存放项目，这里我用的是 Git Bush 执行语句（$ 符号是 Git Bush 中自带的），你也可以使用命令行，一样的

选择项目存放位置

2.查看模块（爱看不看）

查看一下全局安装的模块  npm list --depth=0 -global

查看全局安装的模块

3.创建项目

在命令行输入 vue init webpack vuex-note 并做好设置，创建一个项目

这都什么鬼

4.简单解释一下各个配置都是干嘛的

  1. vue init webpack vuex-note：初始化（init）一个使用 webpack 构建工具构建的 vue 项目，项目名为 vuex-note
  2. Project name：项目名
  3. Project description：项目描述
  4. Author：朕
  5. Vue build：构建方式，分为独立构建和运行时构建，具体说明见如下链接，这里选择独立构建 standalone https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  6. Install vue-router：是否需要安装 vue-router ，跳转页面用的，这里用不着，我过会学
  7. Use ESLint to lint your code：ESLint 规范与法用的，可能你熟悉的写法都是不标准的，如果采用 ESLint 则可能报错，这里选择 n
  8. 剩下的都是测试用的，一路 n
  9. Should we run 'npm install' for you after the project has been created：是否需要直接替你安装（npm install）相关的依赖，回车就行，之后会替你安装各种玩意

5.安装完后会有提示，我们接着按照提示走

先是 cd vuex-note 进入刚刚创建的 vue 项目文件夹

安装完成

再通过 npm run dev 跑起项目

后续操作

6.访问页面

此时通过浏览器访问 localhost:8080 就可以打开一个新的 vue 页面

崭新的 vue 页面

7.项目结构

截止目前的项目结构如图

项目结构

由于是初学，为了先搞个东西出来，所以暂时先不管一些乱七八糟的配置，只挑跟这次相关的说（其实多了我也没学到...）

8.查看 Vuex

既然是使用 Vuex 来实现笔记应用，我们就应该先查看一下构建的项目是否包含 Vuex 模块。

node_modules 文件夹包含了现有的模块，然而里面并没有我们想要的 Vuex，不信自己去看

package.json 文件描述了项目包含的文件，项目如何运行等信息

package.json

9.安装 Vuex

在命令行中输入 npm install vuex --save：--save 就是将安装信息写入 package.json

已安装了 Vuex

至此，所有前期工作已经准备完成，遗漏的部分将在实现过程中逐一解释

搞起

零、思路

整个应用可拆分为三个组件

拆

  1. 每条笔记包括 编号（ID），标题（title），内容（content），是否已收藏（fav） 四种信息
  2. Vuex 中的 state 得有个地方存放 所有的笔记（notes）
  3. 而 收藏，删除 操作只能对 当前的笔记 进行操作，因此我还需要一个标识用来记录 当前的笔记（activeNote） 是哪个
  4. 包含 全部 和 收藏 两种切换方式，因此还需要有一个标识来进行区分，就叫 show 吧，all 代表 全部，fav 就代表 已收藏
  5. 组件 ==> actions.js ==> mutations.js = > state：通过组件调用 actions 中的方法（dispatch），通过 actions 中的方法调用 mutations 中的方法（commit），通过 mutations 中的方法去操作 state 中的笔记列表（notes），当前笔记（activeNote）等等

一、index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vuex-note</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

这个没什么说的，注意 div 的 ID 就行

二、main.js

import Vue from 'vue'
import App from './App'
import store from './store'     

Vue.config.productionTip = false

new Vue({
 el: '#app',
 store,
 components: { App },
 template: '<App/>'
})

1.在 import 时什么时候需要 ' ./ '？

从项目模块中导出，引入时不需要 ./，而从自己写的组件中引入时需要 ./

2.什么时候需要 import {aaa} from abc 这种加大括号的引入？什么时候不需要？

当 abc 中被导出的部分是 export aaa 时

当 import 的是被 export default 导出的部分时不加 {}，并且可以起个别名

3.项目结构中并没有 store 文件，只有 store 文件夹，那 import store from './store' 是什么意思？

不知道，求指教

4. new Vue 中单独的 store 是什么意思？

ES6 的一种简写方式，缩写之前是 store:store，这句话的意思是为全局注入 Vuex，这样在各个组件中都可以通过 this.$store 去调用状态库，如果不在全局注入，则需要在每个组件中单独引入，多了会很麻烦

三、store 下的 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)    

const defaultNote = {
  id: +new Date(),
  title: '新建笔记' + new Date().getMilliseconds(),    // 加时间是为了做一下区分
  content: '笔记内容',
  fav: false
}

// 可以理解为一个状态的仓库
const state = {
  notes: [defaultNote],      // 以数组方式存放所有的笔记
  activeNote: defaultNote,    // 用来记录当前笔记
  show: 'all'           // 用于切换 全部 / 已收藏 两种不同列表的标识
}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

1. Vue.use(Vuex) 是什么意思？

使用 Vuex，今后用 Vue-router 时也得来这么一出，只是得写在 route 文件夹下的 index.js 文件中

2. +new Date() 是什么意思？

获取时间戳的另一种写法，等同于 new Date().getTime()

3.state，getters，mutations，actions 之间的关系？

state：如上所言状态仓库

getters：state 的修饰，比如 state 中有 str:"abc" 这么个属性，而在很多组件中需要进行 str + "def" 的操作，如果在每个组件都进行 str + "def" 的操作未免太麻烦，于是可以在 getters 中增加：

strAdd(){
  return this.str + "abc"
}

今后在组件中使用 strAdd 就可以了

  1. mutations：简单讲就是用来修改 state 的，同步方法.常规调用 this.$store.commit
  2. actions：简单讲用来调用 mutations 的，异步方法.常规调用 this.$store.dispatch

四、tool.vue

<template>
  <div id="tool">
    <button class="add" @click="add_note">新增</button>
    <button class="fav" @click="fav_note">收藏</button>
    <button class="del" @click="del_note">删除</button>
  </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetter, mapActions } from 'vuex'
  export default {
    name: 'tool',
    methods:{
      ...mapActions(['add_note','del_note','fav_note'])
    }
  }
</script>
<style type="text/css" scoped>
  #tool {
    width: 200px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
  }

  button {
    width: 100%;
    height: calc(100% / 3);
    font-size: 60px;
  }
</style>

1.mapState, mapGetter, mapActions 都是什么？

这里有个非常好的解释 http://www.imooc.com/article/14741

此外，当 methods 和 Vuex 的 actions 中具有同名的属性 A 时，可使用 mapActions(['A']) 这种方式简写

注意：1、中括号不能省略；2、中括号内是字符串；3、展开运算符...不能省略

也可以取个别名，写法如下，注意 [] 变成了 {}：

...map({
 本组件的属性 : Vuex 中 actions 中的属性
})

需要传入参数时，前提是 actions 中的属性（方法）能接收参数：

methods:{
 ...mapActions(['abc'])
 // 自定义一个方法，通过触发这个方法调用之前重名的方法并传入参数
 tragger_abc(参数){
  this.abc(参数)
 }
}

2.scoped

对当前组件生效的 CSS

3.calc

使用时记得在运算符前后各加一个空格

五、list.vue

<template>
  <div id="list">
    <div class="switch">
      <button class="all" @click='get_switch_note("all")'>全部</button><button class="fav" @click='get_switch_note("fav")'>已收藏</button>
    </div>
    <div class="search">
      <input type="text" placeholder="在这里搜索" v-model="search" />
    </div>
    <div class="noteList">
      <div class="note" v-for="note in search_filteredNote" :class="{favColor:note.fav===true,active:note.id===activeNote.id}" @click='get_select_note(note)'>
        <div class="title">
          <p>{{note.title}}</p>
        </div>
        <div class="content">
          <p>{{note.content}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetters, mapActions } from 'vuex'
  export default {
    name: 'list',
    data: function() {
      return {
        search: ""
      }
    },
    computed: {
      ...mapState(['notes', 'activeNote']),
      ...mapGetters(['filteredNote']),
      // 二次过滤：在当前列表(全部 或 已收藏)中进行筛选,返回值被用在组件的 v-for 中
      search_filteredNote() {
        if(this.search.length > 0) {    // 如果输入框有值,返回二次过滤的结果并加载
          return this.filteredNote.filter(note => {
            if(note.title.indexOf(this.search) > 0) {
              return note
            }
          })
        } else {      // 输入框没值,不过滤,直接拿来加载
          return this.filteredNote
        }
      }
    },
    methods: {
      ...mapActions(['select_note', 'switch_note']),
      get_select_note(note) {
        this.select_note(note)
      },
      get_switch_note(type) {
        this.switch_note(type)
      }
    }
  }
</script>
<style type="text/css" scoped="scoped">
  #list {
    width: 300px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }

  p {
    margin: 0;
  }

  .switch {}

  .switch button {
    height: 60px;
    width: 50%;
    font-size: 40px;
  }

  .search {
    border: 1px solid #CCCCCC
  }

  input {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    padding: 10px;
    outline: none;
    font-size: 20px;
    border: none;
  }

  .noteList {
    flex-grow: 1;
    overflow: auto;
  }

  .note {
    border: 1px solid #CCCCCC;
  }

  .favColor {
    background: pink;
  }

  .active {
    background: lightblue
  }
</style>

1.data 中的 search 是干嘛的？可不可以写在 computed 中？

用来与搜索框进行关联。可以写在 computed 中，但 computed 中的属性默认都是 getter ，就是只能获取值，如果想修改，需要设置 setter ，详见官方文档

六、edit.vue

<template>
  <div id="edit">
    <div class="title">
      <input type="text" placeholder="在这里输入标题" v-model="activeNote.title"/>
    </div>
    <div class="content">
      <textarea name="" placeholder="在这里吐槽" v-model="activeNote.content"></textarea>
    </div>
  </div>
</template>
<script type="text/javascript">
  import { mapState, mapGetter, mapActions } from 'vuex'
  export default {
    name: 'edit',
    computed:{
      ...mapState(['activeNote'])   // 当本组件中 computed 中的属性名与 Vuex 中的 state 属性名相同时,就可以在 mapState() 中简写
    }
  }
</script>
<style type="text/css" scoped="scoped">
  #edit {
    width: 300px;
    height: 600px;
    border: 2px solid #ccc;
    float: left;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
  }

  .title {
    border: 1px solid #CCCCCC;
  }

  input {
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    padding: 10px;
    outline: none;
    font-size: 20px;
    border: none;
  }

  .content {
    flex-grow: 1;
    background: orange;
    display: flex;
    flex-direction: column;
  }

  textarea {
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    resize: none;
    padding: 10px;
    font-size: 20px;
    outline: none;
    font-family: inherit;
  }
</style>

七、actions.js

export default {
  add_note({commit}) {
    commit('ADD_NOTE')
  },
  select_note({commit}, note) {
    commit("SELECT_NOTE", note)
  },
  del_note({commit}) {
    commit("DEL_NOTE")
  },
  fav_note({commit}) {
    commit("FAV_NOTE")
  },
  switch_note({commit}, type) {
    commit("SWITCH_NOTE", type)
  }
}

1.这是干什么？

这里的每个方法实际上是通过 commit 调用 mutations.js 中的方法；

举个栗子：tool.vue 的 新增 按钮上绑了一个 add_note 自定义方法，在 actions.js 中也定义一个同名的方法，这样就可以在 tool.vue 中的 mapActions 中简写，就是下面这句：

# tool.vue
...mapActions(['add_note','del_note','fav_note'])

而 actions.js 中的 add_note 去调用 mutations.js 中写好的 ADD_NOTE 方法，而实际的添加操作也是在 ADD_NOTE 中，组件也好，actions 也好，最终只是调用 ADD_NOTE 。之所以这么做是因为 mutations 中的方法都是同步的，而 actions 中的方法是异步的，不过在本例里没啥区别

八、getters.js

export default {
  filteredNote: (state) => {
    if(state.show === 'all') {
      return state.notes
    } else {
      return state.notes.filter((note) => {
        if(note.fav === true) {
          return note
        }
      })
    }
  }
}

实现一个过滤，根据 show 来判断展示 全部笔记 还是 已收藏笔记

九、mutations.js

import { SWITCH_NOTE, ADD_NOTE, SELECT_NOTE, DEL_NOTE, FAV_NOTE } from './mutation-types'

export default {
  [ADD_NOTE](state, note = {
    id: +new Date(),
    title: '新建笔记' + new Date().getMilliseconds(),
    content: '笔记内容',
    fav: false
  }) {
    state.notes.push(note)
    state.activeNote = note
  },
  [SELECT_NOTE](state, note) {
    state.activeNote = note
  },
  [DEL_NOTE](state) {
    for(let i = 0; i < state.notes.length; i++) {
      if(state.notes[i].id === state.activeNote.id) {
        state.notes.splice(i, 1)
        state.activeNote = state.notes[i] || state.notes[i - 1] || {}
        return
      }
    }
  },
  [FAV_NOTE](state) {
    state.activeNote.fav = !state.activeNote.fav
  },
  [SWITCH_NOTE](state, type) {
    state.show = type
  }
}

1.export default 那里看着好熟悉

ES6 函数的一种写法，中括号 + 常量 作为函数名，这里常量从其它文件引入

十、mutation-types.js

export const ADD_NOTE = "ADD_NOTE"
export const SELECT_NOTE = "SELECT_NOTE"
export const DEL_NOTE = "DEL_NOTE"
export const FAV_NOTE = "FAV_NOTE"
export const SWITCH_NOTE = "SWITCH_NOTE"

抛出常量，mutations.js 中的函数常量就是这里抛出的，查资料说是这么做便于一目了然都有那些方法。

当然，根据个人习惯，你也可以不这么写

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js实战之使用Vuex + axios发送请求详解
  • Vuex之理解Store的用法
  • 如何使用Vuex+Vue.js构建单页应用
  • 详解vuex 中的 state 在组件中如何监听
  • Vuex之理解Mutations的用法实例
  • Vue.js实战之Vuex的入门教程
  • Vuex之理解Getters的用法实例
  • 基于vue2.0+vuex的日期选择组件功能实现
  • 详解Vue 非父子组件通信方法（非Vuex）
赞 (0)

相关推荐

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • 基于vue2.0+vuex的日期选择组件功能实现

    基于vue2.0+vuex的日期选择组件功能实现

    calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--

  • 详解Vue 非父子组件通信方法（非Vuex）

    详解Vue 非父子组件通信方法（非Vuex）

    一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • 如何使用Vuex+Vue.js构建单页应用

    如何使用Vuex+Vue.js构建单页应用

    前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可

  • Vue.js实战之Vuex的入门教程

    Vue.js实战之Vuex的入门教程

    前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

  • Vuex之理解Getters的用法实例

    1.什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 2.如何使用 定义:我们可以在store中定义getters,第一个参数是state const getters = {sty

  • Vuex之理解Mutations的用法实例

    1.什么是mutations? 上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuex中store数据改变的唯一方法就是mutation! 通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离. 2.怎么用mutation

  • 使用Vuex实现一个笔记应用的方法

    使用Vuex实现一个笔记应用的方法

    最近开始着手学习 Vue,先大略的过了一遍官方文档,跟着敲过一部分官方文档中的 DEMO,然而还是不甚了了.在网上找到了一个入门的笔记应用,即便是入门级的应用,在学习途中依旧困难重重.特将学习作此笔记,方便今后回看,也希望能够帮到刚开始学习 Vue 的女同学 附原作者 Github 链接:https://github.com/lichenbuliren/vuex-notes-app2 预期目标 笔记具备如下基本功能 1.新增 2.删除 3.收藏 4.在全部笔记和收藏笔记间切换 5.在当前列表中进

  • python3 判断列表是一个空列表的方法

    python3 判断空列表 @(python3) 有个判断列表是否为空的需求,试了好多方式,比如: a = [] if a is not None: COMMAND a = [] if a[0] is None: COMMAND 各种乱七八糟的逻辑,老是无法满足.其实很简单. a = [] if a: COMMAND 空列表等于 False, 那么直接 if a 就是判断在列表不为空的时候,需要执行的命令 a = [] if len(a): COMMAND 同理,len(a) = 0 在 a 不

  • vuex与组件联合使用的方法

    官方定义: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.我的理解就是,vuex就是前端的数据库. 1.首先核心是store,是个仓库,包含着state,因此第一步需要新建一个store. 显示界面: 其中state就是仓库store,东西都存在这里. 2.从state中取数据,使用Lodash比较方便,语法如下: 也可以使用vuex的getters,语法; 官方文档还结束通过属性访问,通过方法访问等.https://vuex.vuejs.org/zh-cn/getters.h

  • vuex直接赋值的三种方法总结

    我们在编写vuex代码过程中,觉得在a.vue的模板里面写入例如 <p>{{$store.state.num}}</p>很麻烦,我们希望直接就写成{{num}},我们应该怎么写,vue给出三种固定写法,大家理解之后基本照抄,稍做改动即可 第一种方法 通过computed的计算属性直接赋值 1.store.js(vuex的代码如下): import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state={//

  • 简化vuex的状态管理方案的方法

    简化vuex的状态管理方案的方法

    在 vuejs 相关项目开发过程中,我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理. 事实上,在实际的使用中 vuex 可以说是相当繁琐的,每一次的需求增加需要增加 Mutations-Type . Action 和 Mutations , 为了简化这一操作,我们可以将 mutations 和 action 合并,简化流程如下: 在此种思想的引导下, muse-model 诞生了,以简单优雅的方式完成整个项目的状态管理. 什么是 muse-model mus

  • 封装ThinkPHP的一个文件上传方法实例

    本文实例讲述了封装ThinkPHP的一个文件上传方法,分享给大家供大家参考.具体如下: 这阵子,对WBlog的上传功能作了优化.改进后的上传功能可以实现缩略图上传,图片上传,生成水印,文件上传,并且可以在后台对上传的附件进行大小(文件大小),类型(文件类型),水印(针对图片)的进行设置.此外还可以对上传的文件进行分类保存到相应的文件夹里,方便管理. 下面是对改进后的上传功能作简约的说明. 缩略图上传 先前的缩略图上传功能使用了KindEditor的上传组件,除非上传之前对图片进行缩略处理,不然上

  • Python使用当前时间、随机数产生一个唯一数字的方法

    Python使用当前时间、随机数产生一个唯一数字的方法

    本文实例讲述了Python使用当前时间.随机数产生一个唯一数字的方法.分享给大家供大家参考,具体如下: Python生成当前时间很简单,比Java的代码简短多了,Java产生时间可参考<Java获取当前系统事件System.currentTimeMillis()方法> 具体代码如下: #-*-coding:utf-8-*- import datetime now = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")

  • 使用ADSI、ASP和一对魔术戏法自动地创立一个虚拟目录的方法

    使用ADSI.ASP和一对魔术戏法自动地创立一个虚拟目录,第二部分 Tom Moran 和 Jeff Sandquist 1999年2月22日 我们回来了.大家翘首以盼的这篇文章的第二部分现在在这儿.并且我想你将花费整个晚上看你的猫清洗自己. 这个月,Jeff Sandquist和我完成了我们的动态目录服务接口(Active Directory Services Interfaces ,ADSI)应用程序.如果你来晚了一点,没有问题:只要见这个系列的Part 1 http://www.micro

  • js实现鼠标移到链接文字弹出一个提示层的方法

    本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • 在uiview 的tableView中点击cell进入跳转到另一个界面的实现方法

    1.先重写uiviewcontrol的方法 - (UIViewController *)viewController { for (UIView* next = [self superview]; next; next = next.superview) { UIResponder *nextResponder = [next nextResponder]; if ([nextResponder isKindOfClass:[UIViewController class]]) { return

随机推荐