Coder Social home page Coder Social logo

doubanbyvuessr's Introduction

基于最新的vue2.3的ssr(服务端渲染)搭建的仿豆瓣项目

前后端通过JSON进行通信,后台restful api采用node + express框架。项目地址
关于为什么要使用首页服务端渲染。主要的优点有以下两点
1、在渲染首页数据时不需要客户端发起ajax请求数据然后将数据插入到页面,而是直接在服务端完成请求数据的逻辑,直接返回插入好数据的html给客户端渲染
加快首屏渲染速度
2、便于SEO,如果是单页面应用不使用服务端渲染的话在页面结构看到的只是空荡荡的div #app
关于ssr的官方文档请查看这里
想查看尤老师的官方demo请查看这里
由于文档和demo的写法不是完全一样,我这里在吸收了两者后,根据自己的理解开发了这个项目的架构,
可能有些代码和demo的介绍不一样但没有本质区别。简化了部分代码
代码缩进风格和项目架构均使用当前最标准的架构体现模块化开发的**

觉得好的话麻烦给个star欢迎fork🤔

git clone [email protected]:zhangyuang/doubanbyvuessr.git

npm install

npm run build 请先build不然无法启动回报xxx.json找不到的错误

npm run dev 在开发模式下启动

npm run build

npm run start-prod 在生产模式下启动

开发模式具有热重载以及source map功能
生产模式具有将css文件提取为一个单独的css功能以及砍掉一些设置实现性能最大化

注:由于flex-wrap无法在ios7.X版本以及某些国产android使用故本项目在需要使用flex-wrap时都使用float代替

本项目较多处有使用promise以及async await不熟悉的朋友请先查看这两种新特性的教程

目标功能

  • 服务端使用node流式渲染提升性能 -- 完成
  • 使用code spliting 尽可能优化性能 -- 完成
  • 使用flex + rem实现多移动端自适应 -- 完成
  • 首页查看3种分类的电影功能 -- 完成
  • 查看更多电影功能 -- 开发中
  • 模糊搜索电影功能 -- 完成
  • 热搜词功能 -- 完成
  • 查看电影详情功能 -- 开发中
  • 收藏电影功能 -- 开发中
  • 查看文章列表功能 -- 开发中
  • 文章详情功能 -- 开发中

功能展示

搜索电影功能(支持模糊搜索)

查看更多电影功能

自适应功能

doubanbyvuessr's People

Contributors

zhangyuang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

doubanbyvuessr's Issues

npm

nodejs新学员一枚,希望跟着这个项目能有所成长。

无题

nodejs新学员一枚,希望跟着这个项目能有所成长。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.