🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
后端服务我们都已经开发完毕了,接下来就是前端和后端之间的联调,之前我们都是采用mvc的模式进行开发,现在我们采用的是前后端分离,并且我们也不是采用vue来做前端,而是普普通通的前端html+css+js来进行开发,另外采用cookie来管理的token 使用到了jquery-cookie组件 ### 具体的前端代码我们会在云效代码管理相关的项目当中存放 ### 这里我们只是记录一些注意点 ### ## 第一:接口小调整 ### 开发后端的时候我们为了方便暂时对微信支付进行了放行另外ip和用户user_id直接写死了 所以之类得放开 ### ![](https://img.kancloud.cn/d4/24/d424c9792f5accacb9162ba7c7870177_1581x757.png) ### ## 第二: 动静分离项目静态页面引入bootstrap和jquery 使用的是cdn ### ![](https://img.kancloud.cn/d9/6f/d96f15e85f083a1bb8e5a9595387d812_3204x1862.png) ![](https://img.kancloud.cn/c1/4b/c14b9149115ffa8d0e2cf3e2d4a9f23a_2804x1454.png) ### 因为我们是使用bootstrap进行的页面布局 非常方便 ### bootstrap官方地址:https://v3.bootcss.com/ ![](https://img.kancloud.cn/ce/05/ce054fcc5f3f869727afdcf37621541c_1683x980.png) ### 使用起来还是很方便的 ### https://www.bootcdn.cn/ 从这个网站可以找到很多cdn资源 ### 另外我们需要使用jquery来管理cookie所以就可以上面这个网站上搜索jquery-cookie ![](https://img.kancloud.cn/e4/e9/e4e9a1953ac0d8cd15e91674a29f992e_1803x699.png) ### ## 第三: 处理跨域问题 一般都是后段来解决 ### 跨域:浏览器同源策略 1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。 最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同" 协议相同 http https 域名相同 www.xdcass.ent 端口相同 80 81 一句话:浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 ### 浏览器控制台跨域提示: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. ### **springboot当中如何解决跨域问题呢?** ![](https://img.kancloud.cn/36/b2/36b28e9c7979a8436f9e7c02257ea9fe_2896x1874.png) ### ![](https://img.kancloud.cn/61/9a/619a9759b5cf690c3b60d4ecb1d900db_1256x719.png) ### 注意点:假如接口报错,则跨域配置不生效 ### 其他的直接去看前端的html和js代码即可 ### 另外需要注意的是在进行微信扫码联调的时候我们需要存储服务端返回过来的token到浏览器的cookie当中去 这个时候就用到了jquery-cookie 也就是上面我们提到的 ### 还有需要注意的是进行微信扫码支付联调的时候 请求后段地址的时候要使用127.0.0.1不要使用localhost ![](https://img.kancloud.cn/4d/0b/4d0b4e80af9799ea757125c16ef17590_1205x940.png) ### 其他的就看你自己的造化了 自己去搞定吧 比如分页 这个项目我们只是解决了微信登陆和微信支付核心的部分 其他零零碎碎都不重要