vue ssr java_vue ssr服务端渲染(小白解惑)

最新推荐文章于 2024-09-02 07:00:00 发布
最新推荐文章于 2024-09-02 07:00:00 发布
阅读量566 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39640762/article/details/114879136
版权

>初学ssr入坑

初学vue服务端渲染疑惑非常多，我们大部分前端都是半路出家，上手都是前后端分离，对服务端并不了解，不说java、php语言了，连node服务都还没搞明白，理解服务端渲染还是有些困难的；

网上有非常多的vue服务渲染的入门案例，但看了很久，很多，还是一头雾水，搞不明白这些文件和关键字的联系和意思：

server.js

entrt-client.js

server-js

built-server-bundle.js

vue-ssr-server-bundle.json

vue-ssrclientmanifest.json

createBundleRenderer

clientManifest

这篇内容会按照 基础服务端渲染--vue实例渲染--加入vueRouter--加入vueX的顺序入坑，后续应该还有--开发模式--seo优化--部分渲染，这里先不挖那么多坑了；

>基础服务端渲染

顾名思义，得启个服务：(建个新项目，不要用vue-cli)

ddda95604b2fd8862bd4afc0a3da4f17.png

//server.js

const express = require('express');

const chalk = require('chalk');//加个chalk就是console好看点。。

const server = express();

server.get('*', (req, res) => {

res.set('content-type', "text/html");

res.end(`

Hello

`)

})

server.listen(8080,function(){

let ip = getIPAdress();

console.log(`服务器开在：http://${chalk.green(ip)}:${chalk.yellow(8080)}`)

})

function getIPAdress(){//node下的os模块可以拿到启动该文件的服务端的部分信息

var interfaces = require('os').networkInterfaces();

for (var devName in interfaces) {

var iface = interfaces[devName];

for (var i = 0; i < iface.length; i++) {

var alias = iface[i];

if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {

return alias.address;

}

}

}

}

启动 node server.js

e469208d968fd447c76365e120be6773.png

再看页面 正常，这就是最基础的服务端渲染

0d8445d23f887a25e5d236d0e58915de.png

其实就是一个get请求，返回一个字符串，浏览器默认展示返回结果；

然而对于这个字符串的解析还不明确，什么意思，比如：

e841f12767f23f8d24a62f8e4a8049f9.png

去掉这句话，页面就成了这样，原因不深究，自己百度

c18e7b873bea01708fece89888b0886b.png

>加入vue实例

跳过官网说的built-server-bundle.js应用，意思就是不用管这个文件了，只是一个过渡文件，项目中也不会用到。直接使用createBundleRenderer方法，直接用vue-ssr-server-bundle.json；

看下现在的目录结构：

fee33412b67cd6ae68ba721eb1ce67cd.png

新增了5个文件；有关客户端的配置entry-client.js不是必须的，这里先不管；

app.js是用来创建vue实例的；

entry-server.js是用来创建生成vue-ssr-server-bundle.json(需要用到app.js)所需的配置配件；是给webpack.server.config.js用的；

webpack.server.config.js是用来生成vue-ssr-server-bundle.json的；

vue-ssr-server-bundle.json是给server.js中的createBundleRenderer用的。

//app.js

import Vue from 'vue'

import Vue from './App.vue'//这里一定要写上.vue,不然会匹配到app.js,require不区分大小写0.0

export default createApp=function(){

return new Vue({

render:h => h(App)

})

}

一个createApp生成一个vue实例；

//App.vue

这是个app

export default {}

还没用到

//weback-base.config.js

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

output:{

path:path.resolve(__dirname,'./dist'),

filename:'build.js',

},

module: {

rules: [

{

test:/\.js$/,

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

},

exclude:[/node_modules/,/assets/]

},

{

test:/\.vue$/,

use:['vue-loader']

}

]

},

resolve: {

alias:{

'@':path.resolve(__dirname,'../')

},

extensions:['.js','.vue','.json']

},

plugins:[

new VueLoaderPlugin()

]

}

有关webpack配置不啰嗦

//webpack.server.config.js用来生成vue-ssr-server-bundle.json

const merge = require('webpack-merge')

const baseConfig = require('./webpack.base.js')

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {

entry: './entry-server.js',

// 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，

// 并且还会在编译 Vue 组件时，

// 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。

target: 'node',

// 对 bundle renderer 提供 source map 支持

devtool: 'source-map',

// 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)

output: {

libraryTarget: 'commonjs2'

},

// 这是将服务器的整个输出

// 构建为单个 JSON 文件的插件。

// 默认文件名为 `vue-ssr-server-bundle.json`

plugins: [

new VueSSRServerPlugin()

]

})

这个配置哪都能找到，重点是VueSSRServerPlugin这个插件，生成vue-ssr-server-bundle.json全靠它，去掉的话生成的是built-server-bundle.js；关于merge插件，libraryTarget,target配置问题自己百度webpack去0.0；

//entry-server.js

import { createApp } from './src/app'

export default context => {

return createApp()

}

固定写法，返回一个函数供createBundleRenderer使用；

生成vue-ssr-server-bundle.json

到目前为止安装的插件有：

a8cdac72d186914fc9884364f1958188.png

自己手动一个一个装就行了。

生成vue-ssr-server-bundle.json，使用webpack命令

3fa52ace45fcdfaceb5655580824446a.png

一切都手动，熟悉webpack;

dac6a04cb6b21228955b38fe72c6832d.png

修改server.js

const express = require('express');

const chalk = require('chalk');

const server = express();

const serverBundle = require('./dist/vue-ssr-server-bundle.json')//**新增**//

const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle,{

runInNewContext: false, // 看名字也知道是生成某个新的Context对象,默认是true,改成false理解为某种缓存机制，提高服务器效率

template: require('fs').readFileSync('./index.html', 'utf-8'),

})//**新增**//

server.get('*', (req, res) => {

//res.set('content-type', "text/html");

//res.end(`

//

//

//

Hello

//

//

你好

//

//

//改成下面这样

const context = {//这里的参数现在还没用，但这个对象还是得用，要做renderToString的参数

url:req.url

}

renderer.renderToString(context, (err, html) => {

if (err) {

res.status(500).end('Internal Server Error')

return

} else {

res.end(html)

}

})

`)

})

server.listen(8080,function(){

let ip = getIPAdress();

console.log(`服务器开在：http://${chalk.green(ip)}:${chalk.yellow(8080)}`)

})

function getIPAdress(){//node下的os模块可以拿到启动该文件的服务端的部分信息，细节自己去node上面查

var interfaces = require('os').networkInterfaces();

for (var devName in interfaces) {

var iface = interfaces[devName];

for (var i = 0; i < iface.length; i++) {

var alias = iface[i];

if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {

return alias.address;

}

}

}

}

试一蛤：node server.js

6b019b730b124492b7b8e0b86948dcab.png

正常，箭头指的地方官网有解释。别忘了inde.html中加入一行注释：

4084e0afce26cbcbda3de8f85eb580aa.png

后续修改title,meta头部都是通过类似的注释方式，原理就是正则匹配替换字符串-。-；

>加入路由vue-router

新增几个文件

761d47e631ebd79127af9d2f6f3fc77f.png

需要修改的文件有：

App.vue//加个router-view就行

51786ba62aff2ac8938b484a56e7282f.png

//app.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

export function createApp(){

const app = new Vue({

router,

render:h => h(App)

})

return {app,router}

}

把app实例和router都抛出去，给entry-server.js用

// entry-server.js

import { createApp } from './src/app'

export default context => {

//这里用promise的原因有很多，其中有一个就是下面这个onReady方法是异步的。createBundleRenderer支持promise

return new Promise((resolve, reject) => {

const { app, router } = createApp()

router.push(context.url)

router.onReady(() => {//onReady方法还有getMatchedComponents方法还是需要了解一下

const matchedComponents = router.getMatchedComponents()

if (!matchedComponents.length) {

return reject({ code: 404 })

}

resolve(app)

}, reject)

})

}

最后看一下router.js

//router.js

import Vue from 'vue'

import VueRouter from 'vue-router'

//页面要先声明后使用，不要问为什么

import home from './pages/home'

import store from './pages/store'

Vue.use(VueRouter)

export default new VueRouter({

mode: 'history',

routes:[

{path:'/',name:'home',component:home},

{path:'/store',name:'store',component:store},

]

})

再看一下两个页面的代码；

//store.vue

this is store

export default {}

改的差不多了，试一哈：

重新打个包webpack --config webpack.server.js

启动node server

f12988825ed48bbdca48f6a132e09699.png

>entry-client.js是干啥的

到目前为止还没用到entry-client.js叫客户端配置，不着急使用，先做个测试，写点逻辑试试：

修改下store.vue

//store.vue

{{msg}}

export default {

data(){

msg:'this is store'

},

created(){

this.msg = 'this is created'

},

mounted(){

this.msg = 'this is mounted'

},

methods: {

run(){

alert('this is methods')

}

}

}

看这个样子页面最终展示的结果应该是this is mounted，然而结果是这样的：

8673e075c8ad9c0909bd6c9122c94bca.png

很好解释，服务端对于钩子函数的理解也是很正确的，created会在页面返回之前执行，而mounted是在vue实例成型之后执行，就是页面渲染后，这个是要在客户端才会执行，可是为什么页面出来了没有执行mounted，而且run的点击事件没有生效；

看看页面：

7663387137155dd6fe1d82673a34bde8.png

一个js文件都没加载，怎么执行逻辑，就是个静态页面0.0；

这时候entry-client.js就出场了

19c9347b03812937f7a42ce973efd8f9.png

新增两个文件

//entry-client.js

import { createApp } from './src/app.js';

const { app } = createApp();

app.$mount('#app');

基本配置；

//webpack.client.config.js

const merge = require('webpack-merge')

const baseConfig = require('./webpack.base.config.js')

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {

entry: './entry-client.js',

optimization:{

runtimeChunk:true

},

plugins: [

// 此插件在输出目录中

// 生成 `vue-ssr-client-manifest.json`。

new VueSSRClientPlugin(),

]

})

这个地方重点除了VueSSRClientPlugin生成vue-ssr-client-manifest.json外，optimization是webpack4产物，用来分离生成共公chunk,配置还算复杂，可以看下这里webpack4 optimization总结

修改下server.js

//server.js

const express = require('express');

const chalk = require('chalk');

const server = express();

const serverBundle = require('./dist/vue-ssr-server-bundle.json')

const clientManifest = require('./dist/vue-ssr-client-manifest.json')//新增

const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle,{

runInNewContext: false, // 推荐

template: require('fs').readFileSync('./index.html', 'utf-8'),

clientManifest // //新增

})

server.get('*', (req, res) => {

res.set('content-type', "text/html");

const context = {

url:req.url

}

renderer.renderToString(context, (err, html) => {

if (err) {

res.status(500).end('Internal Server Error')

return

} else {

res.end(html)

}

})

})

server.listen(8080,function(){

let ip = getIPAdress();

console.log(`服务器开在：http://${chalk.green(ip)}:${chalk.yellow(8080)}`)

})

function getIPAdress(){//node下的os模块可以拿到启动该文件的服务端的部分信息，细节自己去node上面查

var interfaces = require('os').networkInterfaces();

for (var devName in interfaces) {

var iface = interfaces[devName];

for (var i = 0; i < iface.length; i++) {

var alias = iface[i];

if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {

return alias.address;

}

}

}

}

打包下：webpack --config webpack.client.config.js

bbd886c7ad990806e4a6fcf084ce78cb.png

node server 一下，看看页面

e3eed3488d7ed35a870fd6ef5ca99169.png

js有了，可是为什么还不行，不能点0.0；

看看。奥报错了

87ea1892685b30b950d6de004099ae32.png

读取不到静态文件；

修改server.js加个静态文件托管：

454005a3b16d5ed8cb3f639525fb5ba0.png

再看看

17aa5c0fd6bc7494096e9ded99521702.png

事件也有了，页面没变化，console一下，发现值其实已经变了，只是失去了响应式；这就是为什么要用vuex的缘故；

>加入vuex

开始想在页面中用this.$set方法，然而行不通，而且不可能给每个值都重新写一个这个方法；

0ddb6e2228e0d2f4d4b2541f00ad38e5.png

加个sotre.js

// store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

msg: ''

},

actions: {

setMsg ({ commit }, val) {

commit('setMsg', val)

}

},

mutations: {

setMsg (state, val) {

Vue.set(state, 'msg', val)//关键

}

}

})

很基础的逻辑，关键在Vue.set这个方法，重新增加了响应式；

修改下app.js

//app.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'//加个store就行了

export function createApp(){

const app = new Vue({

router,

store,

render:h => h(App)

})

return {app,router}

}

store.vue改成这样

{{msg}}

export default {

data(){},

created(){

this.$store.dispatch('setMsg','this is created')

},

computed:{

msg(){

return this.$store.state.msg;

}

},

mounted(){

this.$store.dispatch('setMsg','this is mounted')

},

methods: {

run(){

alert('this is methods')

}

}

}

重新打个包，想一下，修改页面的话只需要重新打包client,如果修改了app.js两个就要都重新打包了；

node server 一下

117401cfc99b24c4591403f86be1fe27.png

这回总算完成了；

>总结

服务端渲染东西还是挺多的，涉及领域也非常广，比如vue，webpack,node，它们的生态圈都大的可怕，需要学习东西非常多，

坑又多，又大，又深，后面还有很多问题要解决：

异步数据加载；//html返回前先渲染一部分接口拿到的数据

怎么做seo优化；//做服务端渲染的重要原因，处理异步数据加载问题也是为了这个

缓存怎么加；

开发环境搭建；//你并不希望每改一行代码就重新手动打个包，重启下服务吧0.0

还有怎么实现部分页面ssr；//一个项目不可能所有页面都服务端渲染，太耗性能，服务器压力大呀；

还有很多疑惑：

比如为什么会失去响应式，webpack到底该怎么配置。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

weixin_39640762
关注
java vue 服务端渲染_Vue.js服务端渲染(SSR)不完全指北
weixin_39821718的博客
02-24 814
写在前面: 这篇文章是19年初时候接手的一个需要服务端渲染的某官网项目时做的一些关于 SSR 的研究和积累. 由于阿里内部的 NodeJS 应用选型基本都会选择 Egg.js 作为基础业务框架, 所以本文也是从 Vue.js + Egg.js 入手和实现, 主要介绍 SSR 本身特点, 构建逻辑, 实现思路和踩坑填坑经验, 以及一些总结向的优化思路.What’s this?SSR(Server-S...
java vue 服务端渲染_vue服务端渲染缓存应用详解
weixin_30174223的博客
02-24 358
服务端渲染简介服务端渲染不是一个新的技术；在 Web 最初的时候，页面就是通过服务端渲染来返回的，用 PHP 来说，通常是使用 Smarty 等模板写模板文件，然后 PHP 服务端框架将数据和模板渲染为页面返回，这样的服务端渲染有个缺点就是一旦要查看新的页面，就需要请求服务端，刷新页面。但如今的前端，为了追求一些体验上的优化，通常整个渲染在浏览器端使用 JS 来完成，配合 history.push...
详解vue服务端渲染(SSR)初探
08-30
本篇文章主要介绍了详解vue服务端渲染(SSR)初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue ssr java_Vue-SSR入门
weixin_31739613的博客
02-28 446
一、下载安装$ npm install express-generator -g使用express命令创建项目(-e：ejs模板引擎)$ express -e myapp2、下载 vue vue-server-renderernpm install vue vue-server-renderer --save二、入门示例在项目根目录下创建index.js，内容如下const Vue = requi...
Java后端服务端渲染与客户端渲染：SSR与CSR的权衡
最新发布
微赚淘客开发者博客
09-02 654
服务端渲染和客户端渲染各有利弊，开发者需要根据应用的需求和上下文来做出选择。随着前端技术的发展，即使在Java后端主导的项目中，也可以通过集成现代前端框架来实现高效的页面渲染策略。在Web应用开发中，服务端渲染（SSR）和客户端渲染（CSR）是两种主要的页面渲染方式，它们各自有不同的优势和适用场景。大家好，我是微赚淘客返利系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！服务端渲染指的是在服务器上生成完整的HTML内容，然后将其发送给客户端。选择合适的渲染方式取决于应用的具体需求。
vue后端渲染 java_vuejs的服务器端渲染和java的服务器端渲染有什么区别吗?
weixin_31240135的博客
02-13 371
在刚工作做java开发的时候, 全都是服务器端渲染, 从 jsp 到 freemarker 等, 为什么 vue/react 要单独提出来这个概念呢? 与 vue/react 有关系吗?java的服务器端渲染以使用Spring为例, 就是写个 Controller, 然后 return 一个模板引擎页面, 同时需要往模板页面中的变量设置值vue的服务器端渲染看官网是结合Express这个web框架...
java 服务端渲染_基于vue-ssr服务端渲染入门详解
weixin_35544325的博客
02-21 2765
第一部分 基本介绍1、前言服务端渲染实现原理机制：在服务端拿数据进行解析渲染，直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面，大致有以下两种形式：1、服务器通过模版引擎直接渲染整个页面，例如java后端的vm模版引擎，php后端的smarty模版引擎。2、服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加。2、服务端渲染的优劣服务端渲染能够...
vue ssr服务端渲染(小白解惑)
12-13
初学vue服务端渲染疑惑非常多，我们大部分前端都是半路出家，上手都是前后端分离，对服务端并不了解，不说java、php语言了，连node服务都还没搞明白，理解服务端渲染还是有些困难的； 网上有非常多的vue服务渲染的...
vuessr结合Express使用Vue2服务端渲染
08-10
vue-ssr 结合Express使用Vue2服务端渲染
vue ssr+koa2构建服务端渲染的示例代码
10-15
主要介绍了vue ssr+koa2构建服务端渲染的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue服务端渲染
高山景行，一尘不染
04-01 515
什么是服务器端渲染 (SSR)？ Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都...
java8源码-java-vue-pdf:java通过vuessr动态生成pdf解决方案Itonlyneedsvue
06-04
java8 源码 java-vue-pdf 注意 此项目已废弃，有更好更快更便捷的解决方案 移步 目前此项目demo正在完善中，已上传时序图 解决场景 使用java生成动态数据的pdf文件 页尾有截图，一目了然 方案优点 纯vue编写，避免繁杂且不直观的java api操作，java只做转换和提供数据源，不参与pdf中渲染逻辑控制 使用vue进行数据映射和页面渲染，符合目前主流前端开发思路，学习成本低，前后分离 可视化编码，效率更高 itext7完美兼容中文，无网上老版本ctrlCV的各种黑科技代码，只需几行官方代码 运行路线 java中带id访问基于vue的ssr服务nuxt nuxt中使用之前的id回调java获取业务数据 通过vue ssr服务端生成进行渲染过的html java接收到html通过itext生成pdf 注：由于ssr只支持get请求，所以如果一次将所有数据都通过url传送的方式不太好，因此通过传递id反向查询数据的方式更靠谱 准备 java8(本人使用) node10(本人使用) 安装字体。生成pdf不需要安装，html直接浏览需要安装字体到系统中，在src/ma
vue JAVA服务器端渲染_vue的服务器端渲染
weixin_39756416的博客
02-27 823
0. 服务端渲染简介服务端渲染不是一个新的技术；在 Web 最初的时候，页面就是通过服务端渲染来返回的，用 PHP 来说，通常是使用 Smarty 等模板写模板文件，然后 PHP 服务端框架将数据和模板渲染为页面返回，这样的服务端渲染有个缺点就是一旦要查看新的页面，就需要请求服务端，刷新页面。但如今的前端，为了追求一些体验上的优化，通常整个渲染在浏览器端使用 JS 来完成，配合history.p...
vue-ssr
hbbaly的博客
06-04 402
vue-ssr GitHub git clone https://github.com/hbbaly/vue-ssr.git cd vue-ssr npm install npm run dev
零基础入门JavaWeb——Vue的渲染
星霖的博客
12-07 198
前端技术学习
java vue 服务端渲染_[Java教程]Vue 2.0 服务端渲染入门
weixin_36317943的博客
02-16 440
[Java教程]Vue 2.0 服务端渲染入门0 2017-02-25 12:00:181 什么是服务端渲染 SSRserver side render就是通过后端吐模板，而不是通过前端ajax获取数据，拼接字符串。2 为什么需要SSR需要SEO，因为爬虫不会等待ajax结果。客户端网络慢，加载速度慢，影响用户体验。3 另一种解决办法 预渲染不是一次性下载整个单页应用，预渲染只是在构...
java vue 服务端渲染_Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr...
weixin_36425412的博客
02-24 231
安装 cross-envyarn add -D cross-env安装 html-webpack-pluginyarn add -D html-webpack-plugin安装 webpack-mergeyarn add -D webpack-merge安装 vue-server-rendereryarn add -D vue-server-renderer测试server.jsconst ren...
基于vue的架构上的一些优化
大灰狼的小绵羊哥哥的博客
09-05 2010
嗨 各位小伙伴好，好久没有写文章了，这次分享一下我们从使用node以来，前端架构上的一些优化 如果看过我上一篇文章B站的前端之路的小伙伴可能知道 我们从去年开始打烊 使用node 到现在已经经历了一年的迭代，承载的访问量也从百万级别 扩大到了现在的亿级别，这次补充一些干货吧~ vue如何实现热更新 我们都知道，对于node来说，前端vue代码的迭代节奏是很快的，可能一周要迭代几次，但是node...
谈服务端渲染vue搭建项目流程
高山景行，一尘不染
09-05 546
vue-cli3 1、vue-cli3创建项目（选安装配置）：https://blog.csdn.net/lbPro0412/article/details/82257450 2、安装：axiox:https://blog.csdn.net/lbPro0412/article/details/82285201 3、安装：vuex （已安装好） 4、修改代码提示：https://blog.c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值