{"id":13536431,"url":"https://github.com/beidan/photoShare","last_synced_at":"2025-04-02T03:30:44.722Z","repository":{"id":95659675,"uuid":"75282601","full_name":"beidan/photoShare","owner":"beidan","description":"一个基于图片分享的社交平台","archived":false,"fork":false,"pushed_at":"2017-05-15T01:52:17.000Z","size":3227,"stargazers_count":215,"open_issues_count":4,"forks_count":77,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-02-09T08:45:57.390Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beidan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-01T10:39:29.000Z","updated_at":"2024-08-01T13:59:08.000Z","dependencies_parsed_at":"2023-05-21T08:00:21.839Z","dependency_job_id":null,"html_url":"https://github.com/beidan/photoShare","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beidan%2FphotoShare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beidan%2FphotoShare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beidan%2FphotoShare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beidan%2FphotoShare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beidan","download_url":"https://codeload.github.com/beidan/photoShare/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750842,"owners_count":20827790,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T09:00:39.214Z","updated_at":"2025-04-02T03:30:44.322Z","avatar_url":"https://github.com/beidan.png","language":"HTML","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"readme":"#vue\n\n### 运行方式\n1. 在根目录下 npm install  下载依赖\n2. npm run dev \n\n## 整体项目采用  vue +  vue-router +  vuex （传说中的vue 全家桶 ），构建工具使用尤大大推出的vue-cli\n\n## vue-cli构建工具必知 \n\n我选用的vue-cli 是基于webpack的版本 ，不了解webpack的可以先粗略看下下面的基本知识\n\n \nwebpack 基本知识点：\n\n- entry：入口点，webpack会从入口点设置的js文件开始对项目进行构建，过程中，所有入口点通过import或者require依赖的包，都会被打包到output中制定的文件和路径；\n\n- output：中设置打包好的文件的输出路径还有文件名；\n\n- module：主要是loaders，loaders是webpack进行打包的解析器，css、vue、babel、scss都需要用npm安装相应的loader，webpack才能对该格式的文件进行解析和处理；\n\n- plugins：是一些webpack的打包插件，跟解析的语言无关，用来辅助构建，提供丰富的附加功能。\n\n \n\n2. vue-cli 安装\n\n1. 首先，安装 vue-cli。(确保你有 node 和 npm)\n```\nnpm i -g vue-cli\n```\n\n2. 创建一个 webpack 项目并且下载依赖\n```\nvue init webpack demo\ncd demo\nnpm i\n```\n\n3. 运行\n\n```\nnpm run dev    //npm run xxx 是执行配置在package.json中的脚本，e.g: 它会去找到package.json的scripts对象，执行node bulid/dev-server.js\n```\n\n4. 构建\n```\nnpm run build   //运行结束后，在当前目录下会在生成 dist 目录，将dist目录放在服务器上，使用服务器上访问index.html的url即可\n若打包之后，项目的静态文件出现引用路径问题，可于项目目录 config/index.js 修改以下数据\nmodule.exports = {\n build:{\n     assetsSubDirectory: 'static',  //修改这里成你项目放置静态文件的目录\n    assetsPublicPath: './',     //修改这里成你项目放置静态文件的目录\n}\n}\n```\n在静态文件 index.html 文件下， 引用静态文件\n\n```\n\u003clink rel=\"stylesheet\" href=\"static/css/icon/iconfont.css\"/\u003e\n```\n\n3. vue支持scss 配置\n\n1. 安装以下模块\n```\nnpm install node-sass --save-dev\nnpm install sass-loader --save-dev   //--save-dev 会将该依赖写入package.json，方便别人安装依赖\n```\n\n2. 打开webpack.base.config.js在loaders里面加上\n```\n{\n    test: /\\.scss$/,\n    loaders: [\"style\", \"css\", \"sass\"]\n }\n```\n\n3. 在需要用到scss的地方写上\n```\n\u003cstyle lang=\"scss\"\u003e \u003c/style\u003e\n```\n\n##  项目整体架构 \n\n1. 项目整体目录如下\n\n```\n --build   \n --config  \n --dist   //npm run build 之后再生成的目录\n --src  \n   --components   // 用于存放组件\n   --page    //页面组件，由vue-router引入\n   --router  //路由\n   --store   // 数据流管理\n   main.js   //入口文件\n   app.vue   //主组件 \n --static   //静态文件目录\n .babelrc    \n .gitignore  //git忽略上传文件\n index.html  //静态文件入口\n package.json\n```\n\n2. main.js\n入口文件，主要作用是初始化vue实例并使用需要的插件\n\n```\n  import Vue from 'vue'\n  import router from './router/router'\n  import store from './store/store'\n  \n  Vue.config.debug = true  //开启debug模式\n  window.log = console.log\n  let data = {\n    router,\n   store\n}\n new Vue(data).$mount('#app')    //创建一个app实例，并且挂载到选择符#app匹配的元素上   在根目录html里面\n```\n\n 挂载到#app ，假如new vue 的时候，有显示的 el 属性\n```\nlet data = {\n  el:'#app', \n  router,\n  store\n}\n```\n则无须手动挂载到选择符#app匹配的元素上\n\n \n\n3. app.vue\n\napp.vue是我们的主组件，所有页面都是在App.vue下进行切换的,由于app.vue在所有页面都有，我们将会在app.vue上面写一些初始化全局方法。\n\n考虑到 组件 header，footer，loading动画基本整个项目都会使用到，app.vue代码如下\n\n```\n  \u003ctemplate\u003e\n    \u003cdiv class=\"com-app\"\u003e\n      \u003ccom-header\u003e\u003c/com-header\u003e    \n      \u003ctransition :name=\"transitionName\"\u003e\n        \u003crouter-view class=\"child-view\"\u003e\u003c/router-view\u003e\n      \u003c/transition\u003e\n      \u003ccom-footer v-show=\"isFooter\"\u003e\u003c/com-footer\u003e\n      \u003ccom-loading v-show=\"loading\"\u003e\u003c/com-loading\u003e\n   \u003c/div\u003e\n \u003c/template\u003e\n```\n由于footer，loading在整个项目中会频繁地改变，故v-show\n```\nv-if       如果条件为false，它什么也不做，加载速度较快。当条件为真时，v-if 才会真正编译渲染页面结构\nv-show 渲染页面结构后，通过 \"display:none\" 控制元素状态\n``` \n\n4. router    根据不同路由跳转目录,按需加载相应的组件\n\n```\n  const routes = [\n    {\n      path: '/',\n      component: App,\n      children: [\n        {path: '/index/:type', name: 'index', component: Index},\n        {path: '/home', name: 'home', component: Home},\n        {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},\n        {path: '/article/:id', name: 'article', component: Article},\n       {path: '/addmsg', name: 'addMsg', component: AddMsg},\n       {path: '/search/:types', name: 'searchresult', component: SearchResult},\n       {path: '/login', name: 'login', component: Login},\n       {path: '/register', name: 'register', component: Register},\n       {path: '/modif', name: 'Modifi', component: Modifi},\n       {path: '/admin', name: 'Admin', component: Admin}\n     ]\n   }\n ]\n const router = new VueRouter({\n   routes: routes, // short for routes: routes\n   linkActiveClass: 'active',  // router-link的选中状态的class，也有一个默认的值\n   history: true\n })\n```\n\n\n1.  vue 组件的说明和使用\n\n一个组件实质上是一个拥有预定义选项的一个 Vue 实例\n在header组件内部允许外部使用，需要导出属性，有2种导出方法\n\n- 默认导出（不用命名）\n\n```\n export default {\n   data () {\n     return {\n       msg: 'header'\n     }\n   }\n}\n```\n以上代码实际上会自动生成一个 new vue\n\n在父组件中导入\n\n```\nimport Header from './components/header'\n```\n \n2.直接在任何变量或者函数前面加上一个关键字\n\n``` \nexport const sqrt = Math.sqrt;\n```\n在父组件中导入\n\n```\nimport sqrt from './components/header';\n```\n\n引用一个组件  \n```\nimport Header from './components/header'\n```\n在该组件中定义\n```\n  export default{\n     data: function () {},   //data一定要是返回一个函数\n     components: {\n       comHeader: Header    //声明组件\n     }\n}\n```\n在template中使用\n```\n \u003ctemplate\u003e\n   \u003cdiv class=\"com-app\"\u003e\n     \u003ccom-header\u003e\u003c/com-header\u003e   //注意，html不区分大小写，所以需要将  comHeader 写成 com-header \n   \u003c/div\u003e\n \u003c/template\u003e\n ```\n\n一个vue对象通常包括下面几个属性\n```\n data：      //vue对象的数据\n methods：  //vue对象的方法\n watch：    //对象监听的方法\n computed：  //计算逻辑放到computed中\n created：   //属性已绑定，dom未生成，一般在这里进行ajax处理以及页面初始化处理\n ```\n\n2. vuex\n\n所有的数据流都是单向的，并且actions只能通过分发mutations来修改 store 实例的状态\n\n像一些全局信息通用，比如 header内容的渲染，是否显示，loading 什么时候显示，什么时候隐藏，以及接口api的固定值，都写在store记录组件的state。\n```\n const store = new Vuex.Store({\n   state: {\n     comm: {\n       loading: false,  //是否显示loading\n       apiUrl: 'photosharing/',  //接口base url\n       imgUrl: 'filebase',    //图片base url\n       indexConf: {\n         isFooter: true, // 是否显示底部\n         isSearch: true, // 是否显示搜索\n         isBack: false,  // 是否显示返回\n         isShare: false, // 是否显示分享\n         title: ''   // 标题\n       }\n     }\n   }\n })\n```\n在mutations中改变state状态\n\n```\n const store = new Vuex.Store({\n mutations: {\n     //loading的显示\n     isLoading: (state, status) =\u003e {\n       state.comm.loading = status\n     },\n     //修改header的信息\n     changeIndexConf: (state, data) =\u003e {\n       Object.assign(state.comm.indexConf, data)\n     }\n })\n```\ne.g 在 header.vue 中 控制是否显示\n\n```\n export default {\n     data: function () {\n       return {}\n     },\n     computed: {\n       isShowSearch: function () {\n         return this.$store.state.comm.indexConf.isSearch   //获取vuex里面 state 状态值\n       },\n       title: function () {\n         return this.$store.state.comm.indexConf.title\n       },\n       isBack: function () {\n         return this.$store.state.comm.indexConf.isBack\n       }\n     }\n }\n```\ntemplate代码\n\n```\n \u003ctemplate\u003e\n   \u003cdiv class=\"header\"\u003e\n     \u003cdiv v-show=\"isShowSearch\"\u003e\u003c/div\u003e\n     \u003cdiv class=\"title\" v-show=\"!isShowSearch\"\u003e\n       \u003ca v-show=\"isBack\" class=\"back t-icon\" @click=\"goBack\"\u003e\u003cspan\n         class=\"iconfont icon icon-xiangzuojiantou\"\u003e\u003c/span\u003e\u003c/a\u003e\n       \u003cp\u003e{{title}}\u003c/p\u003e\n     \u003c/div\u003e\n   \u003c/div\u003e\n \u003c/template\u003e\n```\n在其他地方控制 header 是否显示， e.g： 详情页面\n\n```\n export default {   \n    created: function () {\n       vm.$store.commit('changeIndexConf', {\n         isFooter: false,\n         isSearch: false,\n         isBack: true,\n         isShare: true,\n         title: '详情页'\n       })    \n     }\n  }\n```\n  \n\n3.开发实践总结\n\n1. vue-router\n\n由于整个项目list组件很多地方公用，并且‘我的收藏’，‘搜索结果页面’，‘我的圈子’，仅仅只是从  /search/own 到 /search/star\n此时，原来的组件实例会被复用，意味着组件的生命周期钩子不会再被调用\n解决方法：  复用组件时，想对路由参数的变化作出响应的话，可以简单地 watch（监测变化）  对象\n\n```\n export default {\n   watch: {\n     '$route' (to, from) {\n       // 对路由变化作出响应...\n     }\n   }\n }\n```\n \n\n2. 判断是否登陆\n\n进入个人信息页面，由于需要判断是否已登陆，此时由 router 进行一个拦截，具体代码如下\n\n```\n router.beforeEach(function (to,from,next) {\n   var userMsg = localStorage.getItem('userMsg')\n   if(to.path === '/home'){\n     if(!userMsg){\n       next({ path: '/login' })\n     }\n   }\n   next()\n })\n```\n \n\n3. 常用api\n\n- 点击事件获取当前对象\n\nevent.target ， this为vue 对象\n\n \n- 和jquery类似获取当前dom对象\n```\n \u003cinput type=\"submit\" disabled=\"canSubmit\" ref=\"isSubmit\" @click=\"register\" value=\"立即注册\" class=\"button\"/\u003e\n this.$refs.isSubmit.removeAttribute('disabled')   //使用this.$refs 获取当前dom\n```\n\n\n#### 更详细的介绍\n- 博客地址：\n- http://www.cnblogs.com/beidan/p/6129891.html\n- http://www.cnblogs.com/beidan/p/vue.html\n\n\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeidan%2FphotoShare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeidan%2FphotoShare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeidan%2FphotoShare/lists"}