Merge pull request boylegu#34 from boylegu/issue/33/readme_cn

boylegu · web-flow · commit c68dfc03cb5a · 2017-07-05T21:45:01.000+08:00
close boylegu#33 add readme_cn.md
diff --git a/README-CN.md b/README-CN.md
@@ -0,0 +1,245 @@
+## SprintBoot-Vue
+
+SpringBoot ＋ 前端MVVM 基于Java的微服务全栈快速开发实践
+
+<p align="center">
+  <a href ="##"><img alt="spring_vue" src="https://github.com/boylegu/SpringBoot-vue/blob/master/images/newlogo.jpg?raw=true"></a></p>
+
+<h4 align="center" style="color:	#3399FF">
+Convenient & efficient and better performance for Java microservice full stack.
+</h4>
+
+<p align="center" style="color: #FF66FF">Commemorate the 6 anniversary of enter the profession.</p>
+
+<p align="center" style="color: #FF9933">Give beginner as a present.</p>
+
+<p align="right" style="color: #3399FF">———————By Boyle Gu</p>
+
+## 背景
+如今Web开发领域，当有人提到Java时，总会让人觉得臃肿、古老而过时且开发效率没有某些动态语言高效，甚至在此之前还有人高喊“Java 已死！”，但是事实真是如此吗？其实如果你一直关注着Java，那你的感悟会更深，尽管它有很多的缺点和啰嗦，但不可否认，Java依然是工业界中最优秀的语言，而且它一直保持着与时俱进。本项目将使用SpringBoot + Vue2 ＋ Webpack2 配合最简单CRUD的逻辑来展示一个基于Java的微服务全栈快速开发实践的Demo。
+
+在某些时候，其开发效率已经并不比某些动态语言低。
+
+## 为什么是SpringBoot
+
+首先先来简单的介绍一下Spring，它是目前Java生态中最广为人知、流行的企业级Web框架。不像其他一些框架仅聚焦在某个领域，Spring框架通过其容器化组件式管理及开发，可提供或定制各式各样的功能来满足企业化需求。
+
+那么相较于Spring，Spring Boot的目标是更加容易的创建Spring应用、建立自动化、最少人为干预的生产级配置，真正意义做到开箱即用，并且对于新用户及Spring平台的用户极易上手，快速开发。
+
+下图主要展示了Spring Boot在Spring庞大的生态圈中的层级关系
+
+<p align="center">
+  <a href ="##"><img alt="spring_vue" src="https://github.com/boylegu/SpringBoot-vue/blob/master/images/springboot.png?raw=true"></a></p>
+  
+SpringBoot的目标主要：
+
+- 为所有Spring开发提供一个从根本上更快，且随处可得的入门体验。
+
+- 开箱即用，但通过不采用默认设置可以快速摆脱这种方式。
+
+- 提供一系列大型项目常用的非功能性特征，比如：内嵌服务器，安全，指标，健康检测，外部化配置。
+
+**绝对没有代码生成，也不需要XML配置。**
+
+下面展示的是本项目的SpringBoot相关代码片段，你觉得简单么？
+
+~~~~java
+@RestController
+@RequestMapping("/api/persons")
+public class MainController {
+
+    @RequestMapping(
+            value = "/detail/{id}", 
+            method = RequestMethod.GET, 
+            produces = MediaType.APPLICATION_JSON_VALUE
+            )
+    public ResponseEntity<Persons> getUserDetail(@PathVariable Long id) {
+
+        /*
+        *    @api {GET} /api/persons/detail/:id  details info
+        *    @apiName GetPersonDetails
+        *    @apiGroup Info Manage
+        *    @apiVersion 1.0.0
+        *
+        *    @apiExample {httpie} Example usage:
+        *
+        *        http GET http://127.0.0.1:8000/api/persons/detail/1
+        *
+        *    @apiSuccess {String} email
+        *    @apiSuccess {String} id
+        *    @apiSuccess {String} phone
+        *    @apiSuccess {String} sex
+        *    @apiSuccess {String} username
+        *    @apiSuccess {String} zone
+        */
+
+        Persons user = personsRepository.findById(id);
+
+        return new ResponseEntity<>(user, HttpStatus.OK);
+    }
+
+}
+~~~~
+
+### 为什么是MVVM
+
+那么在我继续之前，我也想和大家回顾一下Web开发的发展简史：
+
+- 第一阶段: 网页三剑客，生猛的通过原生javascript直接操作Dom树;
+
+- 第二阶段: JQuery诞生，配合前端MVC为代表的Backbone.js, 让我们可以优雅而简单的操作Dom树;
+
+- 第三阶段: 后端架构升级为MVC，前后端分工更清晰，前端工程化、ECMAScript规范开始崭露头角;
+
+- 第四阶段: 后端架构进入了微服务时代，前端架构不仅升级为MVVM，ES6更是成为目前事实上的标准;
+
+在这里，我不想过于神化MVVM有多么的先进，JQuery为代表的MVC有多么的落后，但确实MVVM有着很多先进的特性:
+
+- 低开销
+
+- 易维护
+
+- 可重用
+
+### 为什么选择Vue.js
+
+Vue.js是MVVM设计模式中目前最火热的一个前端框架之一，除了性能表现优异之外，与类似React相比，更轻量级、更容易上手。
+
+通过Vue中的“单文件组件”特性，更灵活的定义组件，不仅使代码结构更清晰，而且能与任何其他组件进行随意组合，更具复用性。
+
+<p align="center">
+  <a href ="##"><img style="box-shadow: 8px 8px 5px #888888;"alt="sanic_vue" src="http://i2.muimg.com/536217/5ae4b10becac44b0.png"></a>
+
+### Webpack是什么
+Webpack提供了一整套前端工程自动化的解决方案
+
+## Demo
+
+一个简单的“上海人员信息查询系统”作为例子
+
+
+### 具备的功能(v0.1)
+
+- Spring Boot (后端)
+  
+  - 通过在Spring Boot中建立基于RestFul-API并使用`@ RequestMapping`实现一个基本的CRUD逻辑
+  
+  - 处理CORS(跨域资源共享)
+  
+  - 在Spring Boot中进行单元测试
+
+  - 支持热加载
+  
+  - 增加api接口文档 
+  
+  - 通过SpringBoot配合JPA来实现RestFul-API的分页
+   
+- VueJS & webpack (前端)
+
+  - 遵循ECMAScript 6 规范
+  
+  - 如何在vue中使用‘单文件组件’进行开发编码
+  
+  - 演示‘非父子组件’如何进行简单的通信以及‘父子组件’之间如何传递数据
+  
+  - 如何和后端进行数据交互
+
+  - 如何在vue中优雅的引入第三方JS库
+
+  - 格式化时间
+  
+  - 分页实现
+  
+  - 可复用组件
+ 
+     - DbHeader.vue
+     - DbFooter.vue  (sticky footer) 
+     - DbFilterinput.vue
+     - DbModal.vue
+     - DbSidebar.vue
+     - DbTable.vue 
+     
+     >> 得益于类似vue、react等MVVM模式，本项目的任何组件，只要您觉得合适，都可以复用在您的任何项目中，避免重复造轮子。
+  
+  - 如何通过webpack2配置来自动化构建前端环境(包括如何配置vue2、处理静态文件,构建不同环境等等)  
+
+### 本项目主要技术栈
+- Java 1.7
+- Spring Boot 1.5.x
+- Maven
+- sqlite (not recommend, only convenience example)
+- vueJS 2.x
+- webpack 2.x
+- element ui
+- axios
+
+### 准备工作
+
+- 安装JDK1.7或更新的版本
+- 安装Node.js/NPM
+
+### 安装  
+        
+- 编译前端开发环境
+
+        cd springboot_vue/frontend
+
+        npm install 
+
+### 使用
+
+- 运行Spring Boot后端服务
+
+        cd springboot_vue/target/
+
+        java -jar springboot_vue-0.0.1-SNAPSHOT.jar
+
+
+[![](https://github.com/boylegu/SpringBoot-vue/blob/master/images/spring_run.png?raw=true)]()
+
+- 运行前端服务
+
+        cd springboot_vue/frontend
+
+        npm run dev
+
+
+> 你也可以在生产环境中运行`cd sanic_crudvue/frontend;npm run build`进行编译并配合Nginx
+        
+## 未来计划
+
+本项目可以作为工作参考、学习或者教学演示，之后将陆续以版本的形式，即每个版本都会新增不同的功能演示项，不定期进行发布更新，有以下功能已经在计划之中：
+
+1. 用户认证
+2. 引入更高级的vuex组件通信机制
+3. 演示vue-route的使用
+4. 加入docker部署环境
+5. 新增针对yarn的支持
+... ...
+
+## 技术、教学支持
+
+由于个人时间暂时有限，关于Sanic、Vue、webpack等所有的核心的议题内容非常庞大，因此我将以以下形式来回答和解释关于本项目Demo问题：
+
+1. 以Github Issue的形式进行提问
+2. 电子邮件的形式 gubaoer@hotmail.com
+3. QQ群：315308272
+
+## My Final Thoughts
+
+```
+      .   ____          _
+     /\\ / ___'_ __ _ _(_)_ __  __ _
+    ( ( )\___ | '_ | '_| | '_ \/ _` |
+     \\/  ___)| |_)| | | | | || (_| |
+      '  |____| .__|_| |_|_| |_\__, |
+\  ===========|_|==============|___/== ▀
+\- ▌          SpringBoot-vue             ▀
+ - ▌                            (o)        ▀
+/- ▌            Go Go Go !               ▀
+/  =================================== ▀
+                    ██
+
+
+```
+
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 
 <p align="center">
-  <a href ="##"><img alt="spring_vue" src="https://github.com/boylegu/SpringBoot-vue/blob/master/images/newlogo.jpg?raw=true"></a>
+  <a href ="##"><img alt="spring_vue" src="https://github.com/boylegu/SpringBoot-vue/blob/master/images/newlogo.jpg?raw=true"></a></p>
 
 <h4 align="center" style="color:	#3399FF">
 Convenient & efficient and better performance for Java microservice full stack.
@@ -21,7 +21,7 @@ Convenient & efficient and better performance for Java microservice full stack.
 
 ## overview
 
-This‘s a CRUD demo example base Spring Boot with Vue2 + webpack2. I hope pass thought this project for express Java microservice full stack base web practice.
+Now about Web develop fields. It's very bloated, outmoded and some development efficiency have a lower with each other than other dynamic language when people refers to Java. Even before somebody shouts loudly ‘Java was died’. But is this really the case? In fact, If you often attention to Java in long time, your feel is too deep. Though it's many disadvantages and verbose. It couldn't be denied that Java is still best language in industry member, and advance with the times. This project is a CRUD demo example base Spring Boot with Vue2 + webpack2. I hope pass thought this project for express Java microservice fast full stack base web practice.
 
 ## Why Spring Boot
 
@@ -30,8 +30,10 @@ Spring is a very popular Java-based framework for building web and enterprise ap
 In relation to Spring, 
 Spring Boot aims to make it easy to create Spring-powered, production-grade applications and services with minimum fuss. It takes an opinionated view of the Spring platform so that new and existing users can quickly get to the bits they need.
 
-The diagram below shows Spring Boot as a point of focus on the larger Spring ecosystem. It presents a small surface area for users to approach and extract value from the rest of Spring:
+The diagram below shows Spring Boot as a point of focus on the larger Spring ecosystem:
 
+<p align="center">
+  <a href ="##"><img alt="spring_vue" src="https://github.com/boylegu/SpringBoot-vue/blob/master/images/springboot.png?raw=true"></a></p>
 
 The primary goals of Spring Boot are:
 
@@ -189,10 +191,9 @@ This's a sample ShangHai people information system as example demo.
 - Run back-end server
 
         cd springboot_vue/target/
-
+        
         java -jar springboot_vue-0.0.1-SNAPSHOT.jar
 
-
 [![](https://github.com/boylegu/SpringBoot-vue/blob/master/images/spring_run.png?raw=true)]()
 
 - Run Front-end Web Page
@@ -201,9 +202,32 @@ This's a sample ShangHai people information system as example demo.
 
         npm run dev
 
-
 > You can also run `cd springboot_vue/frontend;npm run build` and it's with Nginx in the production environment
 
+
+## Future Plan
+
+This project can be reference,study or teaching demonstration. After, I will update at every increme version in succession. In future,I have already some plan to below:
+
+1. User Authentication
+2. state manage with vuex
+3. use vue-route
+4. add docker deploy method
+5. support yarn
+... ...
+
+## Support
+
+1. Github Issue
+
+2. To e-mail: gubaoer@hotmail.com
+
+3. You can also join to QQ Group: 315308272
+
+## Related projects
+
+- [Sanic-Vue for Python](https://github.com/boylegu/SanicCRUD-vue)
+
 ## My Final Thoughts
 
 ```
