Java web 项目集成 PC页面

Java web 项目集成 PC页面

1、项目情况

公司项目后端最近没有什么工作，领导派了一个 PC 静态页面对接接口的工作。经过一天的技术试错，最终决定通过

2、项目进展

把公共部分抽取出来，将剩余整个页面作为一个 vue 组件，通过元素 id 来绑定数据（可以创建多个 vue 组件，比较麻烦，而且数据不互通），挂载、创建、方法、计算，通过这写原生技术渲染数据。
今天一天修改了一些后端接口，下午主要对接页面。整个下午对接页面将近10个，主要是同ajax获取不同类型的文章，渲染类型、列表、推荐；通过列表和推荐可以点击进入详情。
使用 vue 渲染数据，数据双向绑定，不用担心js 获取 html 属性数据的问题；也不需要为判断和循环 html 元素花费很多时间。

3 总结

每个静态页挂在 一个 vue 组件，在 vue 组件里面通过 vue 的特性填充数据。
但是发现不同的类型的文章数据结构都是相似的，可以对页面惊醒重构；而且先获取类型，然后根据类型来获取列表，热点推荐，这些方法都是可以封装的。
封装思路：

1. 将 ajax 请求统一写在一个 service.js 文件里面；再创建一个 controller.js 文件，这个文件主要是接受 vue 组件的调用，返回数据；vue 组件就只需要渲染数据，不用去再做复杂的数据计算、判断。
2. 页面重构，就是将详情页统一为一个页面，通过url传递参数的值，来判断 vue 组件初始化发送请求的 url 地址，获取不同的数据。

4、技术理解

咳咳，言归正传，这几日忙于d，大量而对接接口JS变量、接口，以及HTML5环境下，JS的重要性，这两者令我有写出这篇文章的想法。

首先声明，JS作为脚本式语言，肯定是无法和完全OOP的语言相媲美1，本文也无意去做这样的用功。我们希望通过设计模式的一些浅显思想，来完成JS模块的初步优化。

架构
　　没有学过架构，也没用看过关于架构的书，却来妄谈架构，在大牛眼里一定是非常狂妄的，但毫无疑问，一个连简单分层都没有实现的JS代码簇，是相当紊乱的。

MVC显然是一个拿来急用的好东西。将JS简单分为三部分：控制层、模型层和视图层——显得不伦不类，那我就二次修改吧。控制层依然负责调用，模型层则写入大量的数据处理的原型，视图层取消掉，取而代之的是数据层。
　　
　　数据层介于M与C之间，是控制器接受请求之后，传入模型层的数据集，这样的规划可以最大程度保障模型层代码的功用。
　　
　　个人拙见，将任何核心功能代码写死，都是相当糟糕的设计。一个核心功能，应该能在相当程度上保证自己的健壮性。

具体设计
如此优化之后，不但代码本身少了很多，而且接触了写死的绑定，正交增强。接下来，无论是拓展个性化的提示，还是增多接口调用，都只是业务层面的问题了，Core已经完成。
　　相信到这里，分层的好处已经清晰体现了。
上述的分层是相当粗略为简单的，肯定有更好更优秀的分层方式（譬如MVVC——尽管相当多的后端大牛吐槽MVVC是半成品，但不能否认这是前端的进步），希望大家也能在自己的编程经历中，总结出一套适用于自己的分层方式。
　　最近接触了一些HTML5的讯息，JS、Canvas、前端框架，才会愈发感触到“应用型Web”的意义与好处，尽管无法预料编程本身是否都向着应用去发展，可一个漂亮而简单的划分，可以让编程者的心情好很多。

行为（事件）、方法
属性

4、待解决

1. 前端js代码，如何合理分层
2. 数据库，不同类型的文章，如何存储