你可以在这里在线搭建框架

Java

SpringCloud框架搭建
Javaspringcloud

# 说明 该套模版组完成了springcloud最简单的`消费端->eureka->服务`的过程。适用于对springcloud的初步学习,了解springcloud的基本搭建步骤。 # 使用步骤 1. 在详情页面或模版组页面点击立即生成 2. 配置基础报名、项目名称等,如下图所示 ![1.png](/resources/template/62bea442-7a4a-4efc-9991-e1388dd4df47.png) 3. 点击生成代码 4. 下载 # 启动项目 **1. 将生成好的代码下载到本地后,通过idea打开。然后设置idea在这个工作空间的maven,如下图:** ![2.png](/resources/template/76008d27-78cb-4fb2-8bf9-aa97f08b7805.png) **2. maven设置后,你可以看到项目目录如下图** ![3.png](/resources/template/e31cbc9c-f747-4312-a240-e52ac17b2e30.png) **3. 在idea中运行clean install,如下图** ![4.png](/resources/template/53b97c07-5f3a-4a7e-aaa7-f3d5337e592a.png) **4. 启动注册中心,如下图所示** ![5.png](/resources/template/ca520234-65cd-42e7-a8ae-75d4cf2253d3.png) 启动成功后如下图: ![6.png](/resources/template/ba59cfaf-d356-4170-a643-14e2b5e1d65f.png) **5. 启动示例服务,如下图所示** ![7.png](/resources/template/78a484fa-51dd-4e6e-8a97-3daedda73898.png) **6. 启动API工程** ![8.png](/resources/template/01409798-d317-4f99-8cdc-5d63d30653e5.png) **7. 到这里,注册中心、服务者和消费者(API)都成功启动了,则可以访问API工程的hello接口进行校验,如下图** ![9.png](/resources/template/67536343-0591-4e5c-bfe9-359d544a7dc8.png) > **注意:默认情况下访问路径为 `http://localhost:7000/sample/hello`,如果修改了示例服务名称,该地址也会发生变化。如修改为`demo`,则访问路径应为`/demo/hello`** 到这里就完成了项目的启动,如有不明白的地方可以加入懒猴子CGQQ交流群:`877957236` # 框架说明 - pom.xml(项目根目录)用于设置通用的依赖和包版本管理。 - codes-core工程是项目中的核心工程,用于存放异常、工具类等。 - codes-api工程是web工程,用于提供项目接口。 - codes-eureka工程是注册中心工程。 - codes-sample工程是示例服务工程。 - codes-sample/sample-client工程是服务客户端工程,用于提供给客户端给其他应用调用。 - codes-sample/sample-service工程是服务实现工程,用于提供服务的具体实现。 # 常见问题 **1. 是否包含网关?** > 未包含 **2. 是否适合企业项目研发?** > 具有参考价值,但不适合生成后直接用户企业项目的研发,后期会制作完善版本。

SpringMVC框架搭建
Java框架搭建springmvc

# 介绍 这是一套SpringMVC框架脚手架,支持以下技术栈: - MyBatis、Hibernate(持久层框架) - log4j2、logback(日志框架) - Swagger(一个可以可视化接口信息的插件) - Lombok(一个可以帮你省略Getter/Setter、Logger对象定义、构造方法等代码的插件) - JSP(动态页面) - JUnit(单元测试) 你可以根据自己的喜好选择技术栈,即刻生成立即可用的Spring MVC框架。代码生成后你可以查看README.md文件,文件里详细的介绍了框架中几个必要文件和说明了各环节的处理方式。 # 简单了解一下框架内置的处理 #### 一、全局异常处理 为了避免接口出错导致无返回或错误页面不友好,框架进行了全局异常捕获,接口出现错误时分为以下两种情况: 1. 当接口返回的是一串JSON时,全局捕获会自动封装一串表示失败的JSON返回。 2. 当接口返回的是一个页面时,全局捕获会自动跳转至error页面(框架中内含error页) #### 二、JUnit单元测试 为了更方便的进行单元测试,框架内含了BaseTest类,测试类只需要继承该类即可实现单元测试。如下 ![1.png](/resources/template/1632c543-9596-4bc4-8644-eee7ff93c9f1.png) #### 三、全局接口返回对象 当接口需要返回一串JSON时,我们通常会为其定义一个全局的对象作为返回数据结构。框架中内含了这个对象,你也可以自行调整,例如把success属性修改为code,增加errorData,修改构造方式等。现有的对象结构如下,提供了两个success和两个failed静态方法: ![2.png](/resources/template/f6f5e855-5f5f-4bce-b6de-e99dc214ff71.png) # 项目启动后你可以看到你选择的技术栈 如果你集成了JSP,那么访问项目根目录,你可以看到以下页面 ![3.png](/resources/template/d3ade3cf-973b-427b-ba14-d2f79a41d694.png) 你也可以通过框架中的README.md文件查看 ![4.png](/resources/template/b181b6bf-af1d-490c-8d52-518e9be083ba.png) # 为了快速的了解本套框架,我添加了示例功能 除了有README.md文件对框架详细的介绍外,我还增加了示例功能来帮助你快速的了解框架,如果你集成了JSP,那么你可以访问`/user/manage`来查看示例功能,示例功能做了一套简单的增删查改业务,如下: ![5.png](/resources/template/f6146020-5dbe-4d07-b68e-118b68eaf01b.png) # 如果你希望集成更多的内容 如果你希望这套框架集成更多的内容,你可以在评论区留言。收到留言后,我会第一时间回复并尽快集成。 # 常见问题 #### 一、更改数据库用户名无效? 在application.properties中,修改username为root,但最终注入的值为电脑用户名。解决方案如下: 1. 修改application.properties中的username为user 2. 修改spring-mybatis.xml中的${username}为${user}即可 由于这不是必然事件,所以模版内容暂不做调整,感谢`耿耿余淮`(QQ昵称)提供的支持! 感谢你的阅读!

Dubbo框架搭建
Javadubbo

# 说明 这是一套Dubbo框架模版,完成了`消费者->zookeeper->提供者`的搭建过程。生成好后可直接运行。项目消费者和提供者均基于SpringBoot,配置简单。 # 使用步骤 1. 选择该模版组 2. 点击录入元数据(无需录入数据) 3. 点击生成代码 4. 下载代码 # 项目启动 在项目启动之前,你需要先安装好zookeeper并且启动,具体内容可以参考博文[《Dubbo-ZooKepper的安装和使用》](https://blog.csdn.net/u012627861/article/details/83003334)。 1. 将工程导入idea,导入成功后如下图: ![1.png](/resources/template/aa70ce8f-ff75-47f8-a601-bf2257767773.png) 2. 配置好maven 3. 启动提供者工程,如下图 ![2.png](/resources/template/85eb31e1-88ea-410f-b89a-03f70aa8ff20.png) 4. 启动消费者工程,如下图 ![3.png](/resources/template/d7a2ffed-f88e-45d3-a418-ee9fc13599d7.png) 5. 访问http://localhost:8081/welcome,如下图表示成功 ![4.png](/resources/template/4eae9259-8daf-4969-933b-6fa6cd970f9d.png) 这样就成功的搭建好了一个dubbo框架。框架模版会不断的完善。对网站或模版有任何问题可以加入懒猴子CG的QQ交流群:`877957236`。

Struts2框架搭建
Java框架搭建struts2

快速搭建Struts2框架,根据你的需求挑选配置项即可快速构建一套即刻可用的Struts2框架。如果你需要使用此套框架,那么你需要安装以下环境: - Java JDK - Maven - Tomcat 代码生成后,导入编辑器即可运行。具体步骤如下: #### 一、生成代码 && 下载代码 ![1.png](/resources/template/0abeca33-b5a4-476d-9437-b7fdeb321d4b.png) #### 二、导入编辑器 && 配置Maven && 添加Tomcat,IDEA编辑器如下 下图为配置Maven ![2.png](/resources/template/f5d80a70-0fa5-4af1-970c-f79094ee9560.png) Maven配置后拉取jar包(mvn clean install),然后配置Tomcat 下图为配置Tomcat ![3.png](/resources/template/8805bef1-2905-4261-91bf-5f13a9779e6f.png) #### 三、访问项目(具体路径查看tomcat) 下图为访问项目根路径的配置说明页面 ![4.png](/resources/template/efb08abb-ff1f-47d1-9353-9200409a57ab.png) 下图为示例功能(用户管理)页面 ![5.png](/resources/template/72a7002b-1920-4d4f-89f8-b6db2f174fbe.png)

Javascript

React 框架搭建
Javascript

> 框架基于 **create-react-app 2.x** 版本进行搭建,在原基础上完成了UI库及主题定义、axios、路由、国际化以及国际化消息文件的管理、配置管理、本地代理、集成CSS扩展语言等,你可以选择你能掌握或喜欢的技术栈快速搭建出React框架。框架中我们根据多年经验“擅自”定义了一些配置来更好的帮助你完成项目研发,这也是我们推荐的配置。如打包时通过npm run build:test打包测试环境代码、提供全局别名“@”来代替src/pages。当然如果你可以理解并掌握这些内容,你可以随意修改这些配置和代码。 以下介绍了框架各方面的使用方式或实现方式: # 版本锁定(必读) 为了避免npm install时项目依赖升级导致项目无法启动(这通常是依赖升级后,配置发生了变化),代码生成后将包含package-lock.json和yarn.lock文件用于锁定版本,所以请勿删除这两个文件。 # 项目启动 1. 安装依赖,npm install或yarn install 2. npm start # 项目路由 提供HashRouter和BrowerRouter供选择,如果使用BrowserRouter,则需要添加额外的服务器配置,否则会出现页面刷新404问题。如果你必须使用BrowserRouter,请添加`try_files $uri $uri/ /index.html;`配置(注意:以下配置在nginx-1.10.3测试通过,不同nginx版本配置可能会不同),完整配置如下 ``` location / { try_files $uri $uri/ /index.html; root D:\Documents\Downloads\my-react\build; index index.html index.htm; } ``` # 项目打包 - 打包测试环境:npm run build:test(可选) - 打包uat环境:npm run build:uat(可选) - 打包生产环境:npm run build > 打包命令成功后将在项目根目录下生成build目录。 # 环境配置 不同的环境拥有不同的配置文件,方便配置存在环境差异的配置信息,配置文件如下 - env.development: 开发环境 - env.test: 测试环境(可选) - env.uat: 预发布环境(可选) - env.production: 生产环境 > 需要注意的是,环境变量必须以`REACT_APP`开头,如REACT_APP_BASE_URL # 本地代理配置 本地代理配置在src/setupProxy.js中 # 接口定义和调用 **接口定义** 按照模块划分出不同的js文件定义在src/api目录中,如userApi.js, orderApi.js等。接口定义示例如下 order.js ```javascript import request from '../utils/request' export function getOrderInfo (id) { return request.post('/order', { id }) } ``` **请求封装** 项目使用Axios来处理请求,通过请求拦截和响应拦截对请求参数和响应数据进行了统一处理,详见src/utils/request.js。 # 路由配置 采用React-Router-dom,路由信息均配置在src/router/index.js文件中 # 端口配置 在环境配置文件中,如.env.development设置PORT属性即可 # 全局样式 全局样式定义在src/index.css(less, scss)中 # antd主题配置(如果整合了antd) antd的主题配置在src/style/theme.less文件中,可通过此文件对antd的全局样式变量进行覆盖,或定义antd组件的特殊样式。 # 国际化 国际化采用react-intl-universal,消息文件存放在src/locale目录中。通过src/router/index.js初始化国际化配置。国际化消息包含了antd内置的国际化消息,通过src/locale下的国际化消息文件可对内置消息进行覆盖和添加新的消息。 # 代码格式化(可选) 代码格式化采用ESLint实现,对应项目根目录下的.eslintrc.js文件,可通过修改此文件来规范代码格式,具体可参考ESLint官网。

Angular框架搭建(配置中)
Javascript框架搭建angular

### Angular框架正在配置中,敬请期待!!! ### 配置完成后,你可以选择以下技术栈进行快速构建 - 可选UI库:Ant Design、Element UI、iView - 除开发环境和生产环境外,可选增加环境:UAT环境、测试环境 - 可选是否需要组件懒加载 - 可选是否是否整合国际化 - 可选预编译语言:Less、Sass 如需添加更多技术栈,可评论区留言!!!

Vue

Vue PC端框架搭建
Vuevuex框架搭建

# 版本说明 在v2.0.0基础上进行了完善,完善内容如下 1. 增加包管理工具的选择 2. 增加npm和yarn的版本锁定文件 3. 支持less和sass同时集成 4. 修复axios封装时接口前缀未定义的bug 5. 删除项目描述属性 # 关于element-ui的主题定制 由于element-ui使用sass作为预编译语言,所以使用less的项目不得不集成sass。如果你只需要更改element-ui中定义的全局样式变量,可以根据官网给出的步骤进行定制,如下: 1. 在assets/style下新增element-theme.scss文件如下 ```scss /* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; ``` 2. 修改main.js ```javascript import ElementUI from 'element-ui' import './assets/style/element-theme.scss' // import 'element-ui/lib/theme-chalk/index.css' ``` # 项目目录说明 - build: 打包逻辑,通过`npm run build`时执行该目录下的build.js - config: 配置文件目录 - dist: 打包后的目录,用于发布。(在执行npm run build后产生) - src/assets/constants: 常量文件目录 - src/assets/service: 存放接口定义文件 - src/assets/style: 存放样式文件 - src/assets/utils: 存放工具文件 - src/components: 存放项目自定义组件文件 - src/pages: 存放项目页面文件 - src/router: 存放Vue路由配置 - src/filters: 存放自定义过滤器 - src/directives: 存放自定义指令 - src/layouts: 存放布局组件 - src/store: 存放store文件 - static: 存放静态文件,通过`项目域名/static`可直接访问该目录下的资源 # Store模块化 - 根Store中的state, mutations, actions和getters分别对应src/store中的state.js, mutations.js, actions.js和getters.js。 - 模块Store对应src/store/modules目录,一个模块对应一个js文件。详情参考src/store/modules/sample.js文件。 - 新增模块时,则可以在src/store/modules目录下新建js文件,如demo.js,并在src/modules/index.js中导入即可。 # 环境配置 默认情况下,仅存在开发环境和生产环境,如需添加测试环境和预发布,在生成代码时添加选中即可。 #### 环境运行命令 - 开发环境: `npm run dev` - 测试环境: `npm run build-test` - 预发布环境: `npm run build-uat` - 生产环境: `npm run build` #### 环境配置文件 - config/dev.env.js - config/test.env.js - config/uat.env.js - config/prod.env.js 在配置文件中配置的属性,可通过`process.env.属性名`获取,可参考src/page/Index.vue。 其中,非开发环境命令运行后将产生dist目录,dist目录则为发布内容,将其发布至nginx或其他服务器即可。 # API本地代理配置 接口本地代理配置在config/index.js中,代码如下: ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://127.0.0.1:9000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` # 国际化 国际化配置在src/i18n目录中,语言配置在src/i18n/langs下。 # 懒加载 采用import方法即可。详细用法请参考[Vue Router懒加载部分](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97)和[Webpack代码分离](https://webpack.docschina.org/guides/code-splitting/) # API调用 - 接口调用采用axios,axios的默认配置信息在src/assets/utils/axios.js文件中。为了统一处理请求,我们为其做一层封装,详情请查看src/assets/utils/request.js。 - 关于request.js的使用,可以参考src/pages/Index.vue和src/assets/service/IndexService.js。 # 代码格式化 运行`npm run fix`即可,将自动根据ESLint配置进行代码格式化。 # ESLint的启动和关闭 默认关闭,如需开启,修改config/index.js文件中配置即可,如下: ```javascript module.exports = { dev: { useEslint: true, } } ``` 在关闭ESLint的情况下,仍可以运行`npm run fix`进行代码格式化。 # 常见问答 #### 提示找不到npm命令? 答:这是因为电脑未安装npm,Mac电脑请参考[这篇文章](https://blog.csdn.net/u012627861/article/details/83120476),Windows请自行百度一下下哦~ #### 如何修改端口号? - 第一种方式:端口号配置在config/index.js文件里,你应该可以看到一个名为`port`的属性,修改即可。 - 第二种方式:在package.json中增加PORT参数,例如你需要修改dev的端口号,则可以参考以下代码 ```json { "scripts": { "dev": "cross-env PORT=8081 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" }, } ``` #### 本地如何修改访问域名? 首先你需要修改hosts文件! - Windows: C:\Windows\System32\drivers\etc\hosts - Mac: /private/etc/hosts 在hosts文件中添加如下内容(需要用管理员身份修改) `test.com 127.0.0.1` 然后修改项目配置,有两种方式! - 第一种方式:在config/index.js文件里,修改`host`属性 - 第二种方式:在package.json中增加HOST参数,可参考以下代码 ```json { "scripts": { "dev": "cross-env HOST=test.com webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" }, } ``` #### 在常见问答里找不到答案? 加入懒猴子QQ群直接找站长!群号:877957236

Vue移动端框架搭建
Vue

# 简介 为了实现快速的构建一套完整的基于Vue的移动端框架,我们编写了此套模版。在构架移动端框架时,你或许会处理以下方面的事情 1. 采用rem或vw来适配不同的手机 2. 采用axios并对其进行封装来处理http调用 3. 整合less或sass来更好的编写网页样式 4. 整合i18n来实现国际化 5. 增加测试环境、预发布环境 6. 整合eslint或prettier来格式化或美化我们的代码 7. 使用Vant或其它UI库来快速开发 8. 其它 这些内容通过模版都可以直接构建出来,你也可以选择你喜欢的技术栈进行生成。 # 项目启动 你需要安装node才可以启动本项目!!!安装了node后,你可以按照以下步骤来启动项目 1. 下载生成好的项目 2. 将项目导入编辑器 3. 在项目根目录下运行`npm install`来安装项目依赖包 4. 在项目根目录下运行`npm run dev`来启动项目。 项目启动后,默认访问地址为http://localhost:8080,你可以通过项目访问地址看到如下页面内容; ![1.png](/resources/template/37e22615-6641-439b-87a3-e27c5d4e076d.png)